@tuturuuu/ui 0.37.2 → 0.39.0

package/src/components/ui/text-editor/tool-bar.tsx

@@ -35,20 +35,18 @@ import { toast } from '@tuturuuu/ui/sonner';
 import { cn } from '@tuturuuu/utils/format';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TextEditorColorControls } from './color-controls';
-import { type EditorCopyLabels, EditorCopyMenu } from './copy-menu';
+import type { EditorCopyLabels } from './copy-menu';
+import { FixedToolbarContents } from './fixed-toolbar-contents';
 import {
   MAX_IMAGE_SIZE,
   MAX_VIDEO_SIZE,
   StorageQuotaError,
 } from './media-utils';
-import { TOOLBAR_GROUPS } from './toolbar-config';
 import { ToolbarButton, ToolbarSeparator } from './toolbar-controls';
 
 type LinkEditorContext = 'bubble' | 'popover' | null;
 
-// ---------------------------------------------------------------------------
 // Main ToolBar (BubbleMenu)
-// ---------------------------------------------------------------------------
 
 interface ToolBarProps {
   editor: Editor | null;
@@ -59,12 +57,14 @@ interface ToolBarProps {
   onConvertToTask?: () => void | Promise<void>;
   /** When true, the BubbleMenu is hidden because the fixed toolbar is visible */
   fixedToolbarVisible?: boolean;
+  allowEmbeds?: boolean;
   toggleBlockLabel?: string;
 }
 
 export function ToolBar({
   editor,
   fixedToolbarVisible,
+  allowEmbeds = true,
   workspaceId,
   onImageUpload,
   onConvertToTask,
@@ -459,9 +459,7 @@ export function ToolBar({
     toast.success('YouTube video added');
   }, [editor, youtubeUrl]);
 
-  // -----------------------------------------------------------------------
   // Render helpers
-  // -----------------------------------------------------------------------
 
   /** Renders the core formatting buttons (used by both fixed and bubble toolbar) */
   const renderFormattingOptions = useCallback(
@@ -478,11 +476,9 @@ export function ToolBar({
           />
         ))}
 
-        {/* Color controls */}
         <ToolbarSeparator />
         <TextEditorColorControls editor={editor} />
 
-        {/* Link */}
         <ToolbarSeparator />
         <ToolbarButton
           id="link"
@@ -491,8 +487,7 @@ export function ToolBar({
           onClick={() => openLinkEditor(source)}
         />
 
-        {/* Media uploads */}
-        {workspaceId && onImageUpload && (
+        {onImageUpload && (
           <>
             <ToolbarSeparator />
             <ToolbarButton
@@ -508,30 +503,33 @@ export function ToolBar({
               onClick={triggerImageUpload}
               disabled={isUploadingImage}
             />
-            <ToolbarButton
-              id="video"
-              icon={
-                isUploadingVideo ? (
-                  <Loader2 className="size-4 animate-spin" />
-                ) : (
-                  <FileVideo className="size-4" />
-                )
-              }
-              pressed={false}
-              onClick={triggerVideoUpload}
-              disabled={isUploadingVideo}
-            />
+            {workspaceId && (
+              <ToolbarButton
+                id="video"
+                icon={
+                  isUploadingVideo ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : (
+                    <FileVideo className="size-4" />
+                  )
+                }
+                pressed={false}
+                onClick={triggerVideoUpload}
+                disabled={isUploadingVideo}
+              />
+            )}
           </>
         )}
 
-        <ToolbarButton
-          id="youtube"
-          icon={<YoutubeIcon className="size-4" />}
-          pressed={showYoutubeInput}
-          onClick={() => setShowYoutubeInput(!showYoutubeInput)}
-        />
+        {allowEmbeds && (
+          <ToolbarButton
+            id="youtube"
+            icon={<YoutubeIcon className="size-4" />}
+            pressed={showYoutubeInput}
+            onClick={() => setShowYoutubeInput(!showYoutubeInput)}
+          />
+        )}
 
-        {/* Convert to task */}
         {onConvertToTask && (
           <>
             <ToolbarSeparator />
@@ -557,6 +555,7 @@ export function ToolBar({
       triggerVideoUpload,
       isUploadingVideo,
       showYoutubeInput,
+      allowEmbeds,
       onConvertToTask,
       toggleBlockLabel,
     ]
@@ -843,6 +842,7 @@ export function ToolBar({
 }
 
 interface FixedToolbarProps {
+  toolsLabel?: string;
   editor: Editor | null;
   leadingContent?: React.ReactNode;
   workspaceId?: string;
@@ -854,6 +854,7 @@ interface FixedToolbarProps {
   copyLabels?: EditorCopyLabels;
 }
 export function FixedToolbar({
+  toolsLabel,
   editor,
   leadingContent,
   workspaceId,
@@ -1109,78 +1110,20 @@ export function FixedToolbar({
           <ToolbarSeparator />
         </>
       ) : null}
-      {/* Grouped formatting options with separators */}
-      {TOOLBAR_GROUPS.map((group, gi) => (
-        <div key={gi} className="contents">
-          {gi > 0 && <ToolbarSeparator />}
-          {group.map((key) => {
-            const opt = formattingOptions.get(key);
-            if (!opt) return null;
-            return (
-              <ToolbarButton
-                key={key}
-                id={key}
-                label={key === 'toggle-block' ? toggleBlockLabel : undefined}
-                icon={opt.icon}
-                pressed={opt.pressed}
-                onClick={opt.onClick}
-              />
-            );
-          })}
-        </div>
-      ))}
-
-      <ToolbarSeparator />
-      <TextEditorColorControls editor={editor} />
-
-      {/* Media group */}
-      {workspaceId && onImageUpload && (
-        <>
-          <ToolbarSeparator />
-          <ToolbarButton
-            id="image"
-            icon={
-              isUploadingImage ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <ImageIcon className="size-4" />
-              )
-            }
-            pressed={false}
-            onClick={() => fileInputRef.current?.click()}
-            disabled={isUploadingImage}
-          />
-          <ToolbarButton
-            id="video"
-            icon={
-              isUploadingVideo ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <FileVideo className="size-4" />
-              )
-            }
-            pressed={false}
-            onClick={() => videoInputRef.current?.click()}
-            disabled={isUploadingVideo}
-          />
-        </>
-      )}
-
-      {/* Convert to task */}
-      {onConvertToTask && (
-        <>
-          <ToolbarSeparator />
-          <ToolbarButton
-            id="convert-to-task"
-            icon={<CirclePlus className="size-4" />}
-            pressed={false}
-            onClick={onConvertToTask}
-          />
-        </>
-      )}
-
-      <ToolbarSeparator />
-      <EditorCopyMenu editor={editor} labels={copyLabels} />
+      <FixedToolbarContents
+        editor={editor}
+        options={formattingOptions}
+        toolsLabel={toolsLabel}
+        toggleBlockLabel={toggleBlockLabel}
+        copyLabels={copyLabels}
+        imageUpload={!!onImageUpload}
+        videoUpload={!!workspaceId}
+        uploadingImage={isUploadingImage}
+        uploadingVideo={isUploadingVideo}
+        onImage={() => fileInputRef.current?.click()}
+        onVideo={() => videoInputRef.current?.click()}
+        onConvertToTask={onConvertToTask}
+      />
     </div>
   );
 }

package/src/hooks/__tests__/calendar-event-write-payload-readonly.test.ts

@@ -0,0 +1,40 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { describe, expect, it } from 'vitest';
+import { assertOrdinaryCalendarEvent } from '../calendar-event-write-payload';
+
+const event = {
+  id: 'instance',
+  start_at: '2026-10-06T09:00:00Z',
+  end_at: '2026-10-06T10:00:00Z',
+  _originalId: 'original',
+  scheduling_metadata: {
+    provider_recurrence: {
+      state: 'unsupported',
+      provider: 'google',
+      master_id: 'master',
+    },
+  },
+} as CalendarEvent;
+describe('provider readonly ordinary mutation fence', () => {
+  it.each(['instance', 'original'])(
+    'blocks updates/deletes by %s identity even if user unlocks the local event',
+    (id) =>
+      expect(() =>
+        assertOrdinaryCalendarEvent([{ ...event, locked: false }], id)
+      ).toThrow('read only')
+  );
+  it('permits an ordinary independently locked event', () =>
+    expect(() =>
+      assertOrdinaryCalendarEvent(
+        [{ id: 'ordinary', locked: true } as CalendarEvent],
+        'ordinary'
+      )
+    ).not.toThrow());
+  it('retains the scoped native occurrence fence', () =>
+    expect(() =>
+      assertOrdinaryCalendarEvent(
+        [{ id: 'native', seriesId: 'series' } as CalendarEvent],
+        'native'
+      )
+    ).toThrow('explicit series edit scope'));
+});

package/src/hooks/__tests__/collaboration-awareness.test.ts

@@ -0,0 +1,106 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import * as awarenessProtocol from 'y-protocols/awareness';
+import * as Y from 'yjs';
+import SupabaseProvider from '../supabase-provider';
+
+vi.mock('@tuturuuu/internal-api/realtime', () => ({
+  createRealtimeClient: () => {
+    const channel = {
+      on: () => channel,
+      subscribe: () => channel,
+      send: vi.fn(),
+    };
+    return { channel: () => channel, removeChannel: vi.fn() };
+  },
+}));
+afterEach(() => vi.useRealTimers());
+describe('collaboration cursor batching', () => {
+  it('merges all changed client IDs and flushes during continuous updates', async () => {
+    vi.useFakeTimers();
+    const doc = new Y.Doc();
+    const provider = new SupabaseProvider(
+      doc,
+      {} as ConstructorParameters<typeof SupabaseProvider>[1],
+      {
+        channel: 'task-editor-fixture',
+        id: 'fixture',
+        tableName: 'tasks',
+        columnName: 'description_yjs_state',
+        loadState: async () => null,
+        saveState: async () => true,
+        resyncInterval: false,
+      }
+    );
+    const a = new Y.Doc();
+    const b = new Y.Doc();
+    const first = new awarenessProtocol.Awareness(a);
+    const second = new awarenessProtocol.Awareness(b);
+    first.setLocalState({ user: { id: 'a' }, cursor: 1 });
+    second.setLocalState({ user: { id: 'b' }, cursor: 2 });
+    const sent = vi.fn();
+    provider.on('awareness', sent);
+    awarenessProtocol.applyAwarenessUpdate(
+      provider.awareness,
+      awarenessProtocol.encodeAwarenessUpdate(first, [a.clientID]),
+      'local-fixture'
+    );
+    await vi.advanceTimersByTimeAsync(100);
+    awarenessProtocol.applyAwarenessUpdate(
+      provider.awareness,
+      awarenessProtocol.encodeAwarenessUpdate(second, [b.clientID]),
+      'local-fixture'
+    );
+    await vi.advanceTimersByTimeAsync(50);
+    expect(sent).toHaveBeenCalledOnce();
+    const receiverDoc = new Y.Doc();
+    const receiver = new awarenessProtocol.Awareness(receiverDoc);
+    awarenessProtocol.applyAwarenessUpdate(
+      receiver,
+      sent.mock.calls[0]![0],
+      'fixture'
+    );
+    expect(receiver.getStates().get(a.clientID)).toMatchObject({ cursor: 1 });
+    expect(receiver.getStates().get(b.clientID)).toMatchObject({ cursor: 2 });
+    provider.destroy();
+    provider.awareness.destroy();
+    first.destroy();
+    second.destroy();
+    receiver.destroy();
+    for (const d of [doc, a, b, receiverDoc]) d.destroy();
+  });
+  it('does not rebroadcast peer awareness back to the room', async () => {
+    vi.useFakeTimers();
+    const doc = new Y.Doc();
+    const peerDoc = new Y.Doc();
+    const provider = new SupabaseProvider(
+      doc,
+      {} as ConstructorParameters<typeof SupabaseProvider>[1],
+      {
+        channel: 'task-editor-fixture',
+        id: 'fixture',
+        tableName: 'tasks',
+        columnName: 'description_yjs_state',
+        loadState: async () => null,
+        saveState: async () => true,
+        resyncInterval: false,
+      }
+    );
+    const peer = new awarenessProtocol.Awareness(peerDoc);
+    peer.setLocalState({ cursor: 4 });
+    const sent = vi.fn();
+    provider.on('awareness', sent);
+    provider.onAwareness(
+      awarenessProtocol.encodeAwarenessUpdate(peer, [peerDoc.clientID])
+    );
+    await vi.advanceTimersByTimeAsync(200);
+    expect(sent).not.toHaveBeenCalled();
+    expect(provider.awareness.getStates().get(peerDoc.clientID)).toMatchObject({
+      cursor: 4,
+    });
+    provider.destroy();
+    provider.awareness.destroy();
+    peer.destroy();
+    doc.destroy();
+    peerDoc.destroy();
+  });
+});

package/src/hooks/__tests__/native-calendar-mutation-guard.test.ts

@@ -0,0 +1,45 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { describe, expect, it } from 'vitest';
+import {
+  assertOrdinaryCalendarEvent,
+  calendarEventByIdentity,
+  cleanCalendarEventUpdates,
+} from '../calendar-event-write-payload';
+
+const virtual: CalendarEvent = {
+  id: '123e4567-e89b-42d3-a456-426614174000',
+  seriesId: 'series',
+  originalStartLocal: '2026-10-05T09:00:00',
+  start_at: '2026-10-05T09:00:00Z',
+  end_at: '2026-10-05T10:00:00Z',
+};
+describe('native virtual mutation fence', () => {
+  it('resolves full UUID identities without truncating at the first dash', () => {
+    expect(calendarEventByIdentity([virtual], virtual.id)).toBe(virtual);
+  });
+  it('rejects ordinary update/delete/drag identity paths for virtual rows and split rows', () => {
+    expect(() => assertOrdinaryCalendarEvent([virtual], virtual.id)).toThrow();
+    expect(() =>
+      assertOrdinaryCalendarEvent(
+        [{ ...virtual, id: 'split', _originalId: virtual.id }],
+        virtual.id
+      )
+    ).toThrow();
+  });
+  it('preserves ordinary event mutation behavior', () => {
+    expect(() =>
+      assertOrdinaryCalendarEvent(
+        [{ ...virtual, seriesId: undefined }],
+        virtual.id
+      )
+    ).not.toThrow();
+    expect(
+      cleanCalendarEventUpdates({
+        title: 'Title',
+        seriesId: 'injected',
+        originalStartLocal: 'injected',
+        start_at: '2026-10-05T12:00:00Z',
+      })
+    ).toEqual({ title: 'Title', start_at: '2026-10-05T12:00:00Z' });
+  });
+});

package/src/hooks/__tests__/supabase-provider.test.ts

@@ -5,6 +5,14 @@ import SupabaseProvider, {
   SUPABASE_PROVIDER_SYNC_ORIGIN,
 } from '../supabase-provider';
 
+const realtimeMock = vi.hoisted(() => ({ channel: null as unknown }));
+vi.mock('@tuturuuu/internal-api/realtime', () => ({
+  createRealtimeClient: () => ({
+    channel: () => realtimeMock.channel,
+    removeChannel: vi.fn(),
+  }),
+}));
+
 function createRealtimeChannel() {
   let subscribeHandler:
     | ((status: string, err?: { message?: string }) => void)
@@ -22,6 +30,7 @@ function createRealtimeChannel() {
     },
   };
 
+  realtimeMock.channel = channel;
   return channel;
 }
 
@@ -57,9 +66,7 @@ describe('SupabaseProvider', () => {
 
     channel.trigger('SUBSCRIBED');
 
-    await Promise.resolve();
-    await Promise.resolve();
-    expect(provider.connected).toBe(true);
+    await waitFor(() => expect(provider.connected).toBe(true));
     expect(provider.synced).toBe(true);
 
     doc.getMap('prosemirror').set('text', 'hello');
@@ -156,8 +163,7 @@ describe('SupabaseProvider', () => {
     try {
       channel.trigger('SUBSCRIBED');
 
-      await Promise.resolve();
-      await Promise.resolve();
+      await vi.advanceTimersByTimeAsync(0);
       expect(provider.connected).toBe(true);
 
       const sendsBefore = channel.send.mock.calls.length;
@@ -214,8 +220,7 @@ describe('SupabaseProvider', () => {
     try {
       channel.trigger('SUBSCRIBED');
 
-      await Promise.resolve();
-      await Promise.resolve();
+      await vi.advanceTimersByTimeAsync(0);
       expect(provider.connected).toBe(true);
 
       const sendsBefore = channel.send.mock.calls.length;
@@ -344,3 +349,101 @@ describe('SupabaseProvider', () => {
     provider.destroy();
   });
 });
+
+describe('durable hydration without peer transport', () => {
+  it('loads saved content even when the channel never subscribes', async () => {
+    createRealtimeChannel();
+    const saved = new Y.Doc();
+    saved.getText('description').insert(0, 'saved text');
+    const doc = new Y.Doc();
+    const provider = new SupabaseProvider(doc, {} as any, {
+      channel: 'task-editor-offline',
+      tableName: 'tasks',
+      columnName: 'state',
+      id: 'offline',
+      loadState: async () => Array.from(Y.encodeStateAsUpdate(saved)),
+      resyncInterval: false,
+    });
+    await waitFor(() => expect(provider.hydrated).toBe(true));
+    expect(doc.getText('description').toString()).toBe('saved text');
+    expect(provider.connected).toBe(false);
+    expect(provider.synced).toBe(false);
+    provider.destroy();
+    saved.destroy();
+  });
+
+  it('coalesces startup and connection loads and ignores disconnect during hydration', async () => {
+    const channel = createRealtimeChannel();
+    let finish!: (state: number[] | null) => void;
+    const loadState = vi.fn(
+      () =>
+        new Promise<number[] | null>((resolve) => {
+          finish = resolve;
+        })
+    );
+    const provider = new SupabaseProvider(new Y.Doc(), {} as any, {
+      channel: 'task-editor-pending',
+      tableName: 'tasks',
+      columnName: 'state',
+      id: 'pending',
+      loadState,
+      resyncInterval: false,
+    });
+    channel.trigger('SUBSCRIBED');
+    channel.trigger('CLOSED');
+    finish(null);
+    await waitFor(() => expect(provider.hydrated).toBe(true));
+    expect(loadState).toHaveBeenCalledTimes(1);
+    expect(provider.connected).toBe(false);
+    provider.destroy();
+  });
+
+  it('does not hydrate a denied read and retries without unhandled rejection', async () => {
+    const channel = createRealtimeChannel();
+    const loadState = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('Access denied'))
+      .mockResolvedValueOnce(null);
+    const provider = new SupabaseProvider(new Y.Doc(), {} as any, {
+      channel: 'task-editor-denied',
+      tableName: 'tasks',
+      columnName: 'state',
+      id: 'denied',
+      loadState,
+      resyncInterval: false,
+    });
+    const report = vi.fn();
+    provider.on('error', report);
+    await waitFor(() => expect(report).toHaveBeenCalledTimes(1));
+    expect(provider.hydrated).toBe(false);
+    channel.trigger('SUBSCRIBED');
+    await waitFor(() => expect(provider.connected).toBe(true));
+    expect(provider.hydrated).toBe(true);
+    provider.destroy();
+  });
+
+  it('ignores a durable read completing after teardown', async () => {
+    createRealtimeChannel();
+    let finish!: (state: number[] | null) => void;
+    const doc = new Y.Doc();
+    const provider = new SupabaseProvider(doc, {} as any, {
+      channel: 'task-editor-old',
+      tableName: 'tasks',
+      columnName: 'state',
+      id: 'old',
+      loadState: () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        }),
+      resyncInterval: false,
+    });
+    const apply = vi.fn();
+    doc.on('update', apply);
+    provider.destroy();
+    finish(null);
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(provider.hydrated).toBe(false);
+    expect(apply).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/__tests__/use-calendar-readonly.test.tsx

@@ -294,10 +294,15 @@ describe('CalendarProvider Read-Only Mode', () => {
       await createPromise!;
     });
 
+    const optimisticId = calendarMockState.patchVisibleEvents.mock.calls.find(
+      ([, options]) => options?.status === 'creating'
+    )?.[0]?.[0]?.id;
+    expect(optimisticId).toMatch(/^optimistic[0-9a-f]{32}$/);
+
     expect(calendarMockState.patchVisibleEvents).toHaveBeenLastCalledWith(
       [serverEvent],
       expect.objectContaining({
-        clearIds: [expect.stringMatching(/^optimistic-/)],
+        clearIds: [optimisticId],
       })
     );
   });
@@ -322,10 +327,15 @@ describe('CalendarProvider Read-Only Mode', () => {
       ).rejects.toThrow('create failed');
     });
 
+    const optimisticId = calendarMockState.patchVisibleEvents.mock.calls.find(
+      ([, options]) => options?.status === 'creating'
+    )?.[0]?.[0]?.id;
+    expect(optimisticId).toMatch(/^optimistic[0-9a-f]{32}$/);
+
     expect(calendarMockState.patchVisibleEvents).toHaveBeenLastCalledWith(
       [],
       expect.objectContaining({
-        clearIds: [expect.stringMatching(/^optimistic-/)],
+        clearIds: [optimisticId],
       })
     );
   });
@@ -520,4 +530,31 @@ describe('CalendarProvider Read-Only Mode', () => {
       baseEvent,
     ]);
   });
+  it('blocks ordinary update/delete/drag writes for native recurrence occurrences', async () => {
+    const occurrence = {
+      ...baseEvent,
+      seriesId: 'series',
+      seriesRevision: 3,
+      originalStartLocal: '2026-06-22T09:00:00',
+    };
+    calendarMockState.events = [occurrence];
+    const { result } = renderHook(() => useCalendar(), {
+      wrapper: createWrapper(),
+    });
+    await expect(
+      result.current.updateEvent(occurrence.id, {
+        start_at: '2026-06-23T09:00:00Z',
+      })
+    ).rejects.toThrow('explicit series edit scope');
+    await expect(result.current.deleteEvent(occurrence.id)).rejects.toThrow(
+      'explicit series edit scope'
+    );
+    expect(
+      internalApiMocks.updateWorkspaceCalendarEvent
+    ).not.toHaveBeenCalled();
+    expect(
+      internalApiMocks.deleteWorkspaceCalendarEvent
+    ).not.toHaveBeenCalled();
+    expect(result.current.isEventReadOnly(occurrence)).toBe(true);
+  });
 });