@tuturuuu/ui 0.19.0 → 0.20.1

package/src/components/ui/custom/workspace-access/workspace-access-responsive.test.ts

@@ -0,0 +1,64 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+function readWorkspaceAccessSource(fileName: string) {
+  const sourcePath = [
+    join(
+      process.cwd(),
+      'packages/ui/src/components/ui/custom/workspace-access',
+      fileName
+    ),
+    join(process.cwd(), 'src/components/ui/custom/workspace-access', fileName),
+  ].find((candidate) => existsSync(candidate));
+
+  if (!sourcePath) {
+    throw new Error(`Unable to locate ${fileName}`);
+  }
+
+  return readFileSync(sourcePath, 'utf8');
+}
+
+describe('workspace access responsive layout', () => {
+  it.each([
+    'workspace-access-invite-dialog.tsx',
+    'workspace-access-role-editor-dialog.tsx',
+  ])('keeps %s within the mobile viewport with a scrollable body', (file) => {
+    const source = readWorkspaceAccessSource(file);
+
+    expect(source).toContain('max-h-[calc(100dvh-1rem)]');
+    expect(source).toContain('max-sm:bottom-0');
+    expect(source).toContain('overflow-y-auto overscroll-contain');
+    expect(source).toContain('<DialogFooter');
+  });
+
+  it('uses compact navigation and controls on small screens', () => {
+    const toolbar = readWorkspaceAccessSource(
+      'workspace-access-tabs-toolbar.tsx'
+    );
+    const memberRow = readWorkspaceAccessSource(
+      'workspace-access-member-row.tsx'
+    );
+    const peopleFilters = readWorkspaceAccessSource(
+      'workspace-access-people-filters.tsx'
+    );
+
+    expect(toolbar).toContain('grid-cols-4');
+    expect(toolbar).toContain('shrink-0 grid-cols-4');
+    expect(toolbar).not.toContain('2xl:flex-row');
+    expect(toolbar).toContain('sr-only sm:hidden');
+    expect(memberRow).toContain('size-8 shrink-0');
+    expect(memberRow).toContain('<DropdownMenuContent');
+    expect(memberRow).not.toContain('sm:grid-cols-[1fr_auto]');
+    expect(peopleFilters).toContain('className="h-full min-h-0"');
+  });
+
+  it('creates the recommended administrator role with only the admin grant', () => {
+    const page = readWorkspaceAccessSource('workspace-access-page.tsx');
+
+    expect(page).toContain("permissions: [{ enabled: true, id: 'admin' }]");
+    expect(page).not.toContain(
+      'permissions: permissionDefinitions.map((permission)'
+    );
+  });
+});

package/src/components/ui/custom/workspace-access/workspace-access-role-editor-dialog.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { ShieldCheck } from '@tuturuuu/icons';
 import type { SupabaseUser } from '@tuturuuu/supabase/next/user';
 import { Button } from '@tuturuuu/ui/button';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@tuturuuu/ui/dialog';
@@ -131,13 +133,22 @@ export function WorkspaceAccessRoleEditorDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl">
-        <DialogHeader>
-          <DialogTitle>{labels.title}</DialogTitle>
-          <DialogDescription>{labels.description}</DialogDescription>
+      <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100%-1rem)] max-w-none flex-col gap-0 overflow-hidden rounded-b-none p-0 max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:translate-x-0 max-sm:translate-y-0 sm:max-h-[min(90dvh,56rem)] sm:max-w-3xl sm:rounded-lg">
+        <DialogHeader className="shrink-0 gap-0 border-b p-4 pr-12 text-left sm:p-6 sm:pr-12">
+          <div className="flex items-start gap-3">
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-dynamic-purple/25 bg-dynamic-purple/10 text-dynamic-purple">
+              <ShieldCheck className="size-4" />
+            </div>
+            <div className="min-w-0 space-y-1">
+              <DialogTitle>{labels.title}</DialogTitle>
+              <DialogDescription className="leading-5">
+                {labels.description}
+              </DialogDescription>
+            </div>
+          </div>
         </DialogHeader>
 
-        <div className="space-y-4">
+        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain p-4 sm:p-6">
           {state.mode !== 'default' ? (
             <div className="grid gap-2">
               <Label htmlFor="workspace-access-role-name">
@@ -152,9 +163,9 @@ export function WorkspaceAccessRoleEditorDialog({
             </div>
           ) : null}
 
-          <div className="flex items-center justify-between rounded-lg border bg-muted/35 px-4 py-3 text-sm">
+          <div className="flex items-center justify-between rounded-lg border bg-muted/35 px-3 py-2.5 text-sm sm:px-4 sm:py-3">
             <span className="font-medium">{t('ws-roles.permissions')}</span>
-            <span className="tabular-nums">
+            <span className="rounded-full bg-background px-2 py-0.5 font-medium tabular-nums">
               {selectedCount}/{totalCount}
             </span>
           </div>
@@ -164,16 +175,17 @@ export function WorkspaceAccessRoleEditorDialog({
             onSelectedPermissionsChange={setSelectedPermissions}
             selectedPermissions={selectedPermissions}
           />
-
-          <div className="flex justify-end">
-            <Button
-              disabled={disabled || saveMutation.isPending}
-              onClick={() => saveMutation.mutate()}
-            >
-              {saveMutation.isPending ? t('common.processing') : labels.save}
-            </Button>
-          </div>
         </div>
+
+        <DialogFooter className="shrink-0 border-t bg-muted/20 p-3 sm:p-4">
+          <Button
+            className="w-full sm:w-auto"
+            disabled={disabled || saveMutation.isPending}
+            onClick={() => saveMutation.mutate()}
+          >
+            {saveMutation.isPending ? t('common.processing') : labels.save}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );

package/src/components/ui/custom/workspace-access/workspace-access-roles.tsx

@@ -49,7 +49,7 @@ export function WorkspaceAccessRoles({
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-wrap items-start justify-between gap-4">
+      <div className="flex items-start justify-between gap-3">
         <div>
           <h2 className="font-semibold text-lg">{labels.accessLevelsLabel}</h2>
           <p className="text-muted-foreground text-sm">
@@ -57,9 +57,13 @@ export function WorkspaceAccessRoles({
           </p>
         </div>
         {canManageRoles ? (
-          <Button onClick={onCreateRole}>
-            <Plus className="mr-2 h-4 w-4" />
-            {t('ws-roles.create')}
+          <Button
+            onClick={onCreateRole}
+            className="size-9 shrink-0 px-0 sm:w-auto sm:px-4"
+          >
+            <Plus className="size-4 sm:mr-2" />
+            <span className="hidden sm:inline">{t('ws-roles.create')}</span>
+            <span className="sr-only sm:hidden">{t('ws-roles.create')}</span>
           </Button>
         ) : null}
       </div>
@@ -86,7 +90,10 @@ export function WorkspaceAccessRoles({
               role.members && role.members.length > 0
                 ? role.members
                 : assignedMembersForRole(role.id, members);
-            const enabled = enabledPermissionCount(role);
+            const enabled = enabledPermissionCount(role, permissionCount);
+            const isAdministrator = role.permissions.some(
+              (permission) => permission.id === 'admin' && permission.enabled
+            );
             const pct =
               permissionCount > 0
                 ? Math.round((enabled / permissionCount) * 100)
@@ -95,7 +102,7 @@ export function WorkspaceAccessRoles({
             return (
               <div
                 key={role.id}
-                className="rounded-xl border border-border bg-background p-5 transition-colors hover:border-foreground/20"
+                className="rounded-xl border border-border bg-background p-4 transition-colors hover:border-foreground/20 sm:p-5"
               >
                 <div className="flex flex-wrap items-start justify-between gap-4">
                   <div className="flex min-w-0 gap-3">
@@ -133,22 +140,34 @@ export function WorkspaceAccessRoles({
                   </div>
 
                   {canManageRoles ? (
-                    <div className="flex flex-wrap gap-2">
+                    <div className="flex shrink-0 gap-1.5 sm:gap-2">
                       <Button
                         variant="outline"
                         size="sm"
+                        className="size-8 px-0 sm:w-auto sm:px-3"
                         onClick={() => onEditRole(role)}
                       >
-                        <Pencil className="mr-2 h-4 w-4" />
-                        {t('common.edit')}
+                        <Pencil className="size-3.5 sm:mr-2" />
+                        <span className="hidden sm:inline">
+                          {t('common.edit')}
+                        </span>
+                        <span className="sr-only sm:hidden">
+                          {t('common.edit')}
+                        </span>
                       </Button>
                       <Button
                         variant="outline"
                         size="sm"
+                        className="size-8 px-0 sm:w-auto sm:px-3"
                         onClick={() => onDeleteRole(role)}
                       >
-                        <Trash2 className="mr-2 h-4 w-4" />
-                        {t('common.delete')}
+                        <Trash2 className="size-3.5 sm:mr-2" />
+                        <span className="hidden sm:inline">
+                          {t('common.delete')}
+                        </span>
+                        <span className="sr-only sm:hidden">
+                          {t('common.delete')}
+                        </span>
                       </Button>
                     </div>
                   ) : null}
@@ -161,6 +180,11 @@ export function WorkspaceAccessRoles({
                     role={role}
                   />
                 </div>
+                {isAdministrator ? (
+                  <p className="mt-2 text-dynamic-green text-sm">
+                    {t('ws-members.admin_has_all_permissions')}
+                  </p>
+                ) : null}
 
                 {assignedMembers.length > 0 ? (
                   <div className="mt-3 flex flex-wrap gap-1.5 border-border border-t pt-3">

package/src/components/ui/custom/workspace-access/workspace-access-tabs-toolbar.tsx

@@ -27,7 +27,7 @@ type Props = {
 };
 
 const TAB_TRIGGER_CLASS =
-  'rounded-none border-transparent border-b-2 bg-transparent px-1 pt-1 pb-3 text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:border-dynamic-blue data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none';
+  'h-full min-w-0 w-full gap-1.5 overflow-hidden rounded-lg px-2 text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm sm:px-3';
 
 export function WorkspaceAccessTabsToolbar({
   activeTab,
@@ -73,8 +73,8 @@ export function WorkspaceAccessTabsToolbar({
   ];
 
   return (
-    <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
-      <TabsList className="h-auto w-full justify-start gap-5 overflow-x-auto rounded-none border-border border-b bg-transparent p-0 lg:w-auto">
+    <div className="flex flex-col gap-3">
+      <TabsList className="grid h-11 w-full shrink-0 grid-cols-4 gap-1 overflow-hidden rounded-xl border bg-muted/30 p-1">
         {tabs.map((tab) => (
           <TabsTrigger
             key={tab.value}
@@ -83,13 +83,16 @@ export function WorkspaceAccessTabsToolbar({
             className={TAB_TRIGGER_CLASS}
           >
             {tab.icon}
-            {tab.label}
+            <span className="hidden min-w-0 truncate sm:inline">
+              {tab.label}
+            </span>
+            <span className="sr-only sm:hidden">{tab.label}</span>
           </TabsTrigger>
         ))}
       </TabsList>
 
-      <div className="flex w-full shrink-0 flex-col gap-2 sm:flex-row lg:w-auto">
-        <div className="relative min-w-0 sm:min-w-[280px]">
+      <div className="flex w-full min-w-0 gap-2">
+        <div className="relative min-w-0 flex-1">
           <Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={search}
@@ -99,11 +102,20 @@ export function WorkspaceAccessTabsToolbar({
           />
         </div>
         {activeTab === 'people' ? (
-          <Button disabled={!canInvite} onClick={onInviteClick}>
-            <UserPlus className="mr-2 h-4 w-4" />
-            {disableInvite
-              ? t('ws-members.invite_member_disabled')
-              : t('ws-members.invite_member')}
+          <Button
+            disabled={!canInvite}
+            onClick={onInviteClick}
+            className="shrink-0 px-3 sm:px-4"
+          >
+            <UserPlus className="size-4 sm:mr-2" />
+            <span className="hidden sm:inline">
+              {disableInvite
+                ? t('ws-members.invite_member_disabled')
+                : t('ws-members.invite_member')}
+            </span>
+            <span className="sr-only sm:hidden">
+              {t('ws-members.invite_member')}
+            </span>
           </Button>
         ) : null}
       </div>

package/src/components/ui/custom/workspace-select-helpers.ts

@@ -23,11 +23,13 @@ export function normalizeWorkspaceSwitchPath(
   pathname: string,
   nextSlug: string
 ) {
-  const taskBoardsPath = `/${nextSlug}/tasks/boards`;
+  const taskBoardPaths = [`/${nextSlug}/boards`, `/${nextSlug}/tasks/boards`];
 
   if (
-    pathname === taskBoardsPath ||
-    pathname.startsWith(`${taskBoardsPath}/`)
+    taskBoardPaths.some(
+      (taskBoardsPath) =>
+        pathname === taskBoardsPath || pathname.startsWith(`${taskBoardsPath}/`)
+    )
   ) {
     return `/${nextSlug}/tasks`;
   }

package/src/components/ui/custom/workspace-select.tsx

@@ -156,6 +156,8 @@ export function WorkspaceSelect({
   createWorkspaceDescription,
   fallbackLogoUrl = TUTURUUU_LOGO_URL,
   resolveNextPathname,
+  triggerClassName,
+  popoverModal = false,
 }: {
   wsId: string;
   hideLeading?: boolean;
@@ -171,6 +173,9 @@ export function WorkspaceSelect({
     currentPathname: string;
     nextSlug: string;
   }) => string;
+  triggerClassName?: string;
+  /** Keep the picker interactive and scrollable when rendered inside a modal. */
+  popoverModal?: boolean;
 }) {
   const t = useTranslations();
   const router = useRouter();
@@ -554,7 +559,7 @@ export function WorkspaceSelect({
           setShowNewWorkspaceDialog(open);
         }}
       >
-        <Popover open={open} onOpenChange={setOpen}>
+        <Popover modal={popoverModal} open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild disabled={!hasSelectableWorkspaces}>
             <Button
               size="xs"
@@ -563,7 +568,8 @@ export function WorkspaceSelect({
               aria-label="Select a workspace"
               className={cn(
                 hideLeading ? 'justify-center p-0' : 'justify-start',
-                'w-full whitespace-normal text-start'
+                'w-full whitespace-normal text-start',
+                triggerClassName
               )}
               disabled={!hasSelectableWorkspaces}
             >

package/src/components/ui/finance/shared/charts/monthly-total-chart-client.tsx

@@ -310,7 +310,7 @@ export function MonthlyTotalChartClient({
                   return Intl.DateTimeFormat(locale, {
                     month: 'long',
                     year: 'numeric',
-                  }).format(new Date(value));
+                  }).format(new Date(String(value ?? '')));
                 } catch {
                   return value;
                 }

package/src/components/ui/finance/shared/charts/monthly-total-chart.tsx

@@ -215,7 +215,7 @@ export function MonthlyTotalChart({
                   return Intl.DateTimeFormat(locale, {
                     month: 'long',
                     year: 'numeric',
-                  }).format(new Date(value));
+                  }).format(new Date(String(value ?? '')));
                 } catch {
                   return value;
                 }

package/src/components/ui/storefront/cart-summary.tsx

@@ -3,7 +3,7 @@
 import { ArrowRight, ShoppingCart } from '@tuturuuu/icons';
 import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
-import type { FormEvent } from 'react';
+import type { FormEvent, ReactNode } from 'react';
 import { Badge } from '../badge';
 import { AccentButton } from './accent-button';
 import {
@@ -25,6 +25,8 @@ type StorefrontCartSummaryVariant = 'checkout' | 'panel' | 'popover';
 export function StorefrontCartSummary({
   buyerDefaults,
   cartEntries,
+  checkoutBlocked = false,
+  checkoutFields,
   checkoutHref,
   className,
   currency,
@@ -43,6 +45,8 @@ export function StorefrontCartSummary({
 }: {
   buyerDefaults?: StorefrontBuyerDefaults;
   cartEntries: StorefrontCartEntry[];
+  checkoutBlocked?: boolean;
+  checkoutFields?: ReactNode;
   checkoutHref?: string;
   className?: string;
   currency: string;
@@ -63,7 +67,11 @@ export function StorefrontCartSummary({
   const hasCart = cartEntries.length > 0;
   const isCheckoutDisabled = storefront.checkoutMode === 'disabled';
   const submitDisabled =
-    !hasCart || isSubmitting || isCheckoutDisabled || !onCheckoutSubmit;
+    !hasCart ||
+    isSubmitting ||
+    isCheckoutDisabled ||
+    checkoutBlocked ||
+    !onCheckoutSubmit;
   const canOpenCheckout = hasCart && Boolean(checkoutHref || onCheckoutOpen);
 
   if (presentation === 'checkout') {
@@ -101,6 +109,8 @@ export function StorefrontCartSummary({
             />
           </CheckoutSection>
 
+          {checkoutFields}
+
           <AccentButton disabled={submitDisabled} radius={radius}>
             {isSubmitting ? labels.reserving : labels.reserve}
             <ArrowRight className="size-4 shrink-0" />

package/src/components/ui/storefront/storefront-surface.test.tsx

@@ -485,6 +485,27 @@ describe('StorefrontSurface', () => {
     expect(screen.getByLabelText('Email')).toBeEnabled();
   });
 
+  it('shows checkout routing guidance and blocks dispatch until it is ready', () => {
+    render(
+      <StorefrontSurface
+        cartLines={[{ listingId: listing.id, quantity: 1 }]}
+        checkoutBlocked
+        checkoutFields={<div>Choose an approved payment station</div>}
+        listings={[listing]}
+        mode="checkout"
+        onCheckoutSubmit={() => undefined}
+        storefront={{ ...storefront, checkoutMode: 'square_terminal' }}
+      />
+    );
+
+    expect(
+      screen.getByText('Choose an approved payment station')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Reserve with Polar' })
+    ).toBeDisabled();
+  });
+
   it('keeps simulated storefront chrome customer-facing', () => {
     render(
       <StorefrontSurface

package/src/components/ui/storefront/storefront-surface.tsx

@@ -50,6 +50,8 @@ export function StorefrontSurface({
   buyerDefaults,
   cartLines = [],
   cartHref,
+  checkoutBlocked = false,
+  checkoutFields,
   checkoutOpen,
   checkoutHref,
   className,
@@ -83,6 +85,8 @@ export function StorefrontSurface({
   buyerDefaults?: StorefrontBuyerDefaults;
   cartLines?: StorefrontCartLine[];
   cartHref?: string;
+  checkoutBlocked?: boolean;
+  checkoutFields?: ReactNode;
   checkoutOpen?: boolean;
   checkoutHref?: string;
   className?: string;
@@ -269,6 +273,8 @@ export function StorefrontSurface({
     <StorefrontCartSummary
       buyerDefaults={buyerDefaults}
       cartEntries={checkoutEntries}
+      checkoutBlocked={checkoutBlocked}
+      checkoutFields={checkoutFields}
       checkoutHref={checkoutHref}
       currency={currency}
       isCheckout

package/src/components/ui/text-editor/__tests__/collaboration-binding.test.tsx

@@ -0,0 +1,161 @@
+import { render } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import * as Y from 'yjs';
+import { RichTextEditor } from '../editor';
+
+const useEditorMock = vi.hoisted(() => vi.fn((..._args: unknown[]) => null));
+
+vi.mock('@tiptap/react', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@tiptap/react')>()),
+  EditorContent: () => null,
+  useEditor: (...args: unknown[]) => useEditorMock(...args),
+}));
+
+vi.mock('../tool-bar', () => ({
+  FixedToolbar: ({ className }: { className?: string }) => (
+    <div className={className} data-testid="fixed-toolbar" />
+  ),
+  ToolBar: () => null,
+}));
+
+type UseEditorCall = [
+  { extensions: Array<{ name: string }> },
+  unknown[] | undefined,
+];
+
+function lastCall(): UseEditorCall {
+  const calls = useEditorMock.mock.calls as unknown as UseEditorCall[];
+  const call = calls.at(-1);
+  if (!call) throw new Error('useEditor was never called');
+  return call;
+}
+
+function extensionNames() {
+  return lastCall()[0].extensions.map((extension) => extension.name);
+}
+
+describe('RichTextEditor collaboration binding', () => {
+  beforeEach(() => {
+    useEditorMock.mockClear();
+  });
+
+  it('omits the collaboration extension while collaboration is off', () => {
+    render(
+      <RichTextEditor
+        allowCollaboration={false}
+        content={null}
+        yjsDoc={undefined}
+      />
+    );
+
+    expect(extensionNames()).not.toContain('collaboration');
+  });
+
+  // Regression: `Editor.setOptions({ extensions })` does not rebuild the
+  // extension manager, so the only way to attach the Collaboration extension
+  // after mount is to recreate the editor. A task dialog opened from a deep link
+  // mounts before the task hydrates — i.e. with collaboration off — and used to
+  // stay non-collaborative forever, leaving the description permanently empty.
+  it('rebuilds the editor when collaboration turns on after mount', () => {
+    const doc = new Y.Doc();
+    const { rerender } = render(
+      <RichTextEditor allowCollaboration={false} content={null} yjsDoc={doc} />
+    );
+
+    const initialDeps = lastCall()[1];
+    expect(extensionNames()).not.toContain('collaboration');
+
+    rerender(<RichTextEditor allowCollaboration content={null} yjsDoc={doc} />);
+
+    const collaborativeCall = lastCall();
+    expect(collaborativeCall[0].extensions.map((e) => e.name)).toContain(
+      'collaboration'
+    );
+    // A changed dependency array is what makes `useEditor` throw away the
+    // non-collaborative instance and build a new one.
+    expect(collaborativeCall[1]).not.toEqual(initialDeps);
+    expect(collaborativeCall[1]).toContain(doc);
+  });
+
+  it('keeps a stable dependency array across unrelated re-renders', () => {
+    const doc = new Y.Doc();
+    const { rerender } = render(
+      <RichTextEditor allowCollaboration content={null} yjsDoc={doc} />
+    );
+
+    const initialDeps = lastCall()[1];
+
+    // `collaborationUser` is a fresh object on every render in the task dialog;
+    // it must not be part of the dependency array or the editor would be
+    // rebuilt (and the caret reset) on every render.
+    rerender(
+      <RichTextEditor
+        allowCollaboration
+        collaborationUser={{ color: '#fff', name: 'Ada' }}
+        content={null}
+        yjsDoc={doc}
+      />
+    );
+
+    expect(lastCall()[1]).toEqual(initialDeps);
+  });
+
+  // The provider only drives CollaborationCaret (cosmetic remote cursors).
+  // Rebuilding a live editor for it would tear down the ProseMirror view and
+  // re-run the Yjs binding over the whole document mid-session — expensive and
+  // user-visible on a large document, for no content benefit.
+  it('does not rebuild the editor when only the provider arrives', () => {
+    const doc = new Y.Doc();
+    const provider = { awareness: { setLocalStateField: () => {} } };
+    const { rerender } = render(
+      <RichTextEditor allowCollaboration content={null} yjsDoc={doc} />
+    );
+
+    const initialDeps = lastCall()[1];
+
+    rerender(
+      <RichTextEditor
+        allowCollaboration
+        collaborationUser={{ color: '#fff', name: 'Ada' }}
+        content={null}
+        yjsDoc={doc}
+        yjsProvider={provider as never}
+      />
+    );
+
+    expect(lastCall()[1]).toEqual(initialDeps);
+  });
+});
+
+describe('RichTextEditor toolbar reveal', () => {
+  beforeEach(() => {
+    useEditorMock.mockClear();
+  });
+
+  // The toolbar must reveal on focus *within* the editor wrapper, not on editor
+  // focus alone: clicking a toolbar button moves focus out of the text, so a
+  // stricter rule would hide the toolbar on mousedown and swallow the click.
+  it('hides the toolbar until focus lands inside the editor', () => {
+    const { container } = render(
+      <RichTextEditor content={null} revealToolbarOnFocus />
+    );
+
+    const toolbar = container.querySelector('[data-testid="fixed-toolbar"]');
+    expect(toolbar?.className).toContain('opacity-0');
+    expect(toolbar?.className).toContain('group-focus-within:opacity-100');
+    // Inert while hidden, so it cannot show hover states or tooltips; the
+    // wrapper turns a press in that strip into editor focus instead.
+    expect(toolbar?.className).toContain('pointer-events-none');
+    expect(toolbar?.className).toContain(
+      'group-focus-within:pointer-events-auto'
+    );
+    expect(container.firstElementChild?.className).toContain('group');
+  });
+
+  it('leaves the toolbar visible by default', () => {
+    const { container } = render(<RichTextEditor content={null} />);
+
+    const toolbar = container.querySelector('[data-testid="fixed-toolbar"]');
+    expect(toolbar?.className ?? '').not.toContain('opacity-0');
+  });
+});