@tuturuuu/ui 0.37.2 → 0.39.0

package/src/components/ui/legacy/calendar/use-calendar-draft-save.tsx

@@ -0,0 +1,141 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  type CalendarSourceOption,
+  getGoogleCalendarColorOptions,
+} from '@tuturuuu/internal-api';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { Button } from '@tuturuuu/ui/button';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { createCalendarDraftRecovery } from './calendar-draft-recovery';
+import { eventSavePayload } from './event-save-payload';
+
+type Draft = Partial<CalendarEvent>;
+type SaveArgs = {
+  draft: Draft;
+  original?: CalendarEvent;
+  buildPayload: () => Draft;
+  addEvent: (
+    event: Omit<CalendarEvent, 'id'>,
+    options?: { requestId?: string }
+  ) => Promise<CalendarEvent | undefined>;
+  updateEvent: (id: string, payload: Draft) => Promise<unknown>;
+  closeModal: () => void;
+  setIsSaving: (saving: boolean) => void;
+  onError: () => void;
+  isSaving: boolean;
+  source?: CalendarSourceOption;
+  wsId?: string;
+};
+
+export function useCalendarDraftSave(args: SaveArgs) {
+  const t = useTranslations('calendar');
+  const connectionId =
+    args.source?.provider === 'google' ? args.source.connectionId : null;
+  const { data: capabilities } = useQuery({
+    queryKey: ['google-calendar-color-options', args.wsId, connectionId],
+    enabled: !!args.wsId && !!connectionId,
+    queryFn: () => getGoogleCalendarColorOptions(args.wsId!, connectionId!),
+  });
+  const scope = `${args.draft.ws_id}:${args.draft.requestId ?? args.original?.id}`;
+  const state = useRef({ scope, recovery: createCalendarDraftRecovery() });
+  if (state.current.scope !== scope)
+    state.current = { scope, recovery: createCalendarDraftRecovery() };
+  const [uncertainScope, setUncertainScope] = useState<string>();
+  const current = state.current;
+  const recovery = current.recovery;
+  const uncertain = uncertainScope === scope && !recovery.original();
+
+  async function retryOriginal() {
+    const submission = recovery.submitted();
+    if (!submission?.recoverable) return;
+    args.setIsSaving(true);
+    try {
+      const saved = await args.addEvent(
+        submission.payload as Omit<CalendarEvent, 'id'>,
+        {
+          requestId: submission.requestId,
+        }
+      );
+      if (!saved) throw new Error('Unconfirmed creation');
+      if (state.current !== current) return;
+      recovery.complete(saved);
+      // The caller may have edited the draft during the uncertain response.
+      // Keep those edits open; their next save updates the confirmed event ID.
+      setUncertainScope(undefined);
+    } catch {
+      if (state.current === current) args.onError();
+    } finally {
+      if (state.current === current) args.setIsSaving(false);
+    }
+  }
+
+  async function save() {
+    if (uncertain) return;
+    args.setIsSaving(true);
+    try {
+      const payload = args.buildPayload();
+      const confirmed = recovery.original();
+      if (confirmed) {
+        const sourceChanged =
+          JSON.stringify(payload.source) !==
+          JSON.stringify(recovery.submitted()?.payload.source);
+        const updates = eventSavePayload(payload, confirmed, sourceChanged);
+        if (Object.keys(updates).length)
+          await args.updateEvent(confirmed.id, updates);
+      } else if (args.original?.id === 'new') {
+        if (!args.draft.requestId)
+          throw new Error('Missing creation request ID');
+        const submission = recovery.capture(
+          payload,
+          args.draft.requestId,
+          !!connectionId &&
+            capabilities?.connectionId === connectionId &&
+            capabilities.providerColorWrites === true
+        );
+        const saved = await args.addEvent(
+          submission.payload as Omit<CalendarEvent, 'id'>,
+          {
+            requestId: submission.requestId,
+          }
+        );
+        if (!saved) throw new Error('Unconfirmed creation');
+        recovery.complete(saved);
+      } else if (args.original?.id) {
+        if (Object.keys(payload).length)
+          await args.updateEvent(args.original.id, payload);
+      } else throw new Error('No event to save');
+      if (state.current === current) args.closeModal();
+    } catch {
+      if (recovery.submitted() && !recovery.original())
+        setUncertainScope(scope);
+      if (state.current === current) args.onError();
+    } finally {
+      if (state.current === current) args.setIsSaving(false);
+    }
+  }
+
+  return {
+    save,
+    recoveryNotice: uncertain ? (
+      <div role="status" className="mb-2 space-y-2">
+        <p className="text-muted-foreground text-sm">
+          {t(
+            recovery.submitted()?.recoverable
+              ? 'creation_recovery_notice'
+              : 'creation_recovery_unavailable'
+          )}
+        </p>
+        {recovery.submitted()?.recoverable && (
+          <Button
+            variant="outline"
+            onClick={retryOriginal}
+            disabled={args.isSaving}
+          >
+            {t('creation_recovery_retry')}
+          </Button>
+        )}
+      </div>
+    ) : null,
+  };
+}

package/src/components/ui/legacy/calendar/use-provider-recurrence-operation.test.tsx

@@ -0,0 +1,185 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { InternalApiError } from '@tuturuuu/internal-api/client';
+import type { PropsWithChildren } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+  reserve: vi.fn(),
+  read: vi.fn(),
+  retry: vi.fn(),
+}));
+vi.mock('@tuturuuu/internal-api/calendar-provider-series', () => ({
+  reserveCalendarProviderSeriesOperation: mocks.reserve,
+  getCalendarProviderSeriesOperation: mocks.read,
+  retryCalendarProviderSeriesOperation: mocks.retry,
+}));
+
+import { useProviderRecurrenceOperation } from './use-provider-recurrence-operation';
+
+const clients: QueryClient[] = [];
+const payload = {
+  requestId: '11111111-1111-4111-8111-111111111111',
+  action: 'create' as const,
+  source: { provider: 'google' as const, connectionId: 'connection' },
+  rule: {
+    version: 1 as const,
+    timeZone: 'UTC',
+    frequency: 'daily' as const,
+    interval: 1,
+    end: { type: 'never' as const },
+  },
+  anchor: {
+    startLocal: '2026-10-06T09:00:00',
+    endLocal: '2026-10-06T10:00:00',
+    allDay: false,
+  },
+  event: { title: 'Test series' },
+};
+function setup(
+  client = new QueryClient({ defaultOptions: { queries: { retry: false } } }),
+  actorId = 'actor'
+) {
+  clients.push(client);
+  const applied = vi.fn(),
+    assertActive = vi.fn();
+  const actor = {
+    actorId,
+    lifetime: { active: true },
+    assertActive,
+  } as Parameters<typeof useProviderRecurrenceOperation>[0]['actor'];
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  );
+  const hook = renderHook(
+    () =>
+      useProviderRecurrenceOperation({
+        wsId: 'workspace',
+        actor,
+        identity: 'new',
+        onApplied: applied,
+      }),
+    { wrapper }
+  );
+  return { ...hook, client, applied, assertActive };
+}
+beforeEach(() => {
+  vi.clearAllMocks();
+  sessionStorage.clear();
+  mocks.read.mockResolvedValue({
+    operationId: '11111111-1111-4111-8111-111111111111',
+    status: 'pending',
+  });
+  mocks.reserve.mockResolvedValue({
+    operationId: '11111111-1111-4111-8111-111111111111',
+    status: 'pending',
+  });
+  mocks.retry.mockResolvedValue({
+    operationId: '11111111-1111-4111-8111-111111111111',
+    status: 'pending',
+  });
+});
+afterEach(() => {
+  for (const client of clients.splice(0)) client.clear();
+});
+describe('recoverable provider operation UI state', () => {
+  it('does not finish a pending reservation and retries the exact confirmed operation', async () => {
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.result.current.pending).toBe(true));
+    await waitFor(() =>
+      expect(h.result.current.submission.isSuccess).toBe(true)
+    );
+    expect(h.applied).not.toHaveBeenCalled();
+    act(() => h.result.current.retry());
+    await waitFor(() =>
+      expect(mocks.retry).toHaveBeenCalledWith(
+        'workspace',
+        '11111111-1111-4111-8111-111111111111'
+      )
+    );
+    expect(mocks.reserve).toHaveBeenCalledTimes(1);
+    h.unmount();
+  });
+  it('retains an ambiguous admission across dialog dismissal and never creates a new intent', async () => {
+    mocks.reserve.mockRejectedValue(new Error('Response lost'));
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.result.current.submission.isError).toBe(true));
+    h.unmount();
+    const reopened = setup(h.client);
+    expect(reopened.result.current.pending).toBe(true);
+    mocks.reserve.mockResolvedValue({
+      operationId: '11111111-1111-4111-8111-111111111111',
+      status: 'pending',
+    });
+    act(() => reopened.result.current.retry());
+    await waitFor(() => expect(mocks.reserve).toHaveBeenCalledTimes(2));
+    expect(mocks.reserve.mock.calls[1]).toEqual(['workspace', payload]);
+    reopened.unmount();
+  });
+  it('finishes only a matching applied receipt and clears the retained intent', async () => {
+    mocks.reserve.mockResolvedValue({
+      operationId: '11111111-1111-4111-8111-111111111111',
+      status: 'applied',
+      result: {},
+    });
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.applied).toHaveBeenCalledTimes(1));
+    expect(h.result.current.pending).toBe(false);
+    h.unmount();
+  });
+
+  it('recovers only the operation UUID after reload without persisting event contents', async () => {
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() =>
+      expect(h.result.current.submission.isSuccess).toBe(true)
+    );
+    expect(JSON.stringify(sessionStorage)).not.toContain('Test series');
+    h.unmount();
+    const restored = setup();
+    expect(restored.result.current.pending).toBe(true);
+    act(() => restored.result.current.retry());
+    await waitFor(() =>
+      expect(mocks.retry).toHaveBeenCalledWith('workspace', payload.requestId)
+    );
+    expect(mocks.reserve).toHaveBeenCalledTimes(1);
+    restored.unmount();
+  });
+
+  it('releases a completed preflight rejection only after an authoritative absent operation', async () => {
+    mocks.reserve.mockRejectedValue(new InternalApiError('Unsupported', 422));
+    mocks.read.mockRejectedValue(new InternalApiError('Absent', 404));
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.result.current.submission.isError).toBe(true));
+    expect(h.result.current.pending).toBe(false);
+    expect(sessionStorage.length).toBe(0);
+    h.unmount();
+  });
+  it('blocks dispatch when UUID recovery storage is unavailable', async () => {
+    const storage = vi
+      .spyOn(Storage.prototype, 'setItem')
+      .mockImplementation(() => {
+        throw new Error('Storage denied');
+      });
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.result.current.submission.isError).toBe(true));
+    expect(mocks.reserve).not.toHaveBeenCalled();
+    expect(h.result.current.pending).toBe(false);
+    h.unmount();
+    storage.mockRestore();
+  });
+  it('does not carry another actor’s pending draft into the new session', async () => {
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.result.current.pending).toBe(true));
+    h.unmount();
+    const other = setup(h.client, 'another-actor');
+    expect(other.result.current.pending).toBe(false);
+    other.unmount();
+  });
+});

package/src/components/ui/legacy/calendar/use-provider-recurrence-operation.ts

@@ -0,0 +1,186 @@
+'use client';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  type CalendarProviderSeriesOperationPayload,
+  type CalendarProviderSeriesOperationResult,
+  getCalendarProviderSeriesOperation,
+  reserveCalendarProviderSeriesOperation,
+  retryCalendarProviderSeriesOperation,
+} from '@tuturuuu/internal-api/calendar-provider-series';
+import { InternalApiError } from '@tuturuuu/internal-api/client';
+import { useEffect, useMemo } from 'react';
+import type { useWorkspaceActor } from '../../../../hooks/use-workspace-visibility';
+
+type Pending = {
+  operationId: string;
+  payload?: CalendarProviderSeriesOperationPayload;
+  confirmed: boolean;
+};
+/** Retained within the actor-scoped query cache so dismissing a pending dialog cannot create another intent. */
+export function useProviderRecurrenceOperation({
+  wsId,
+  actor,
+  identity,
+  onApplied,
+}: {
+  wsId: string;
+  actor: NonNullable<ReturnType<typeof useWorkspaceActor>>;
+  identity: string;
+  onApplied: () => void;
+}) {
+  const client = useQueryClient();
+  const key = useMemo(
+    () => ['calendar-provider-pending', wsId, actor.actorId, identity],
+    [wsId, actor.actorId, identity]
+  );
+  const storageKey = `calendar-provider-operation:${wsId}:${actor.actorId}:${identity}`;
+  const retained = useQuery<Pending | null>({
+    queryKey: key,
+    queryFn: () => null,
+    enabled: false,
+    initialData: () => {
+      try {
+        const id = sessionStorage.getItem(storageKey);
+        return id && /^[0-9a-f]{8}-[0-9a-f-]{27,40}$/i.test(id)
+          ? { operationId: id, confirmed: true }
+          : null;
+      } catch {
+        return null;
+      }
+    },
+    gcTime: Infinity,
+  });
+  const pending = retained.data;
+  const status = useQuery({
+    queryKey: [
+      'calendar-provider-operation',
+      wsId,
+      actor.actorId,
+      pending?.operationId,
+    ],
+    enabled: !!pending,
+    queryFn: async ({ signal }) => {
+      actor.assertActive();
+      const value = await getCalendarProviderSeriesOperation(
+        wsId,
+        pending!.operationId,
+        { signal }
+      );
+      actor.assertActive();
+      return value;
+    },
+    retry: false,
+    refetchInterval: (query) => {
+      if (query.state.data?.status === 'applied') return false;
+      const error = query.state.error;
+      if (
+        error instanceof InternalApiError &&
+        [401, 403, 404, 409, 422, 429].includes(error.status)
+      )
+        return false;
+      // Network/server failures need an explicit retry, not a repeated request storm.
+      return error ? false : 2000;
+    },
+  });
+  const submission = useMutation({
+    mutationFn: async (payload?: CalendarProviderSeriesOperationPayload) => {
+      actor.assertActive();
+      const current = client.getQueryData<Pending | null>(key);
+      const intent = current?.payload ?? payload;
+      const operationId = current?.operationId ?? intent?.requestId;
+      if (!operationId) throw new Error('No provider operation');
+      // UUID only: preserve recovery across reloads without storing event content or credentials.
+      // If storage is unavailable, fail before admitting a request that cannot be recovered.
+      sessionStorage.setItem(storageKey, operationId);
+      // Retain before sending: a failed response may follow a successful remote reservation.
+      client.setQueryData<Pending>(key, {
+        operationId,
+        payload: intent,
+        confirmed: current?.confirmed ?? false,
+      });
+      let value: CalendarProviderSeriesOperationResult;
+      try {
+        value =
+          current?.confirmed || !intent
+            ? await retryCalendarProviderSeriesOperation(wsId, operationId)
+            : await reserveCalendarProviderSeriesOperation(wsId, intent);
+      } catch (error) {
+        // Only a completed rejection plus authoritative absence can release an intent.
+        // Transport errors retain it because the server may already have reserved it.
+        if (
+          !current?.confirmed &&
+          error instanceof InternalApiError &&
+          [400, 403, 404, 409, 422].includes(error.status)
+        ) {
+          try {
+            await getCalendarProviderSeriesOperation(wsId, operationId);
+          } catch (lookupError) {
+            actor.assertActive();
+            if (
+              lookupError instanceof InternalApiError &&
+              lookupError.status === 404
+            ) {
+              sessionStorage.removeItem(storageKey);
+              client.setQueryData(key, null);
+            }
+          }
+        }
+        throw error;
+      }
+      actor.assertActive();
+      const operationKey = [
+        'calendar-provider-operation',
+        wsId,
+        actor.actorId,
+        operationId,
+      ];
+      const observed =
+        client.getQueryData<CalendarProviderSeriesOperationResult>(
+          operationKey
+        );
+      if (
+        observed?.status === 'applied' &&
+        observed.operationId === operationId
+      )
+        return observed;
+      client.setQueryData<Pending>(key, {
+        operationId,
+        payload: intent,
+        confirmed: true,
+      });
+      client.setQueryData<CalendarProviderSeriesOperationResult>(
+        ['calendar-provider-operation', wsId, actor.actorId, operationId],
+        value
+      );
+      return value;
+    },
+  });
+  const receipt =
+    status.data?.status === 'applied' ? status.data : submission.data;
+  const applied =
+    !!pending &&
+    receipt?.status === 'applied' &&
+    receipt.operationId === pending.operationId;
+  useEffect(() => {
+    if (!applied) return;
+    try {
+      actor.assertActive();
+    } catch {
+      return;
+    }
+    if (!client.getQueryData<Pending | null>(key)) return;
+    try {
+      sessionStorage.removeItem(storageKey);
+    } catch {
+      /* An applied UUID is safe to recover again. */
+    }
+    client.setQueryData(key, null);
+    onApplied();
+  }, [applied, actor, client, key, storageKey, onApplied]);
+  return {
+    pending: !!pending,
+    submission,
+    status,
+    retry: () => submission.mutate(undefined),
+  };
+}

package/src/components/ui/popover.tsx

@@ -44,4 +44,6 @@ function PopoverAnchor({
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+const PopoverClose = PopoverPrimitive.Close;
+
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/src/components/ui/text-editor/__tests__/collaboration-carets.test.ts

@@ -0,0 +1,142 @@
+import { waitFor } from '@testing-library/react';
+import { Editor } from '@tiptap/core';
+import Collaboration from '@tiptap/extension-collaboration';
+import CollaborationCaret from '@tiptap/extension-collaboration-caret';
+import StarterKit from '@tiptap/starter-kit';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  Awareness,
+  applyAwarenessUpdate,
+  encodeAwarenessUpdate,
+} from 'y-protocols/awareness';
+import * as Y from 'yjs';
+import {
+  renderCollaborationCaret,
+  renderCollaborationSelection,
+  scrollToCollaborationCaret,
+} from '../collaboration-carets';
+
+describe('remote cursors and selections', () => {
+  it('identifies duplicate names by account ID and safely renders untrusted names', () => {
+    const root = document.createElement('div');
+    const first = renderCollaborationCaret({
+      id: 'first',
+      name: 'Alex',
+      color: '#123456',
+    });
+    const second = renderCollaborationCaret({
+      id: 'second',
+      name: 'Alex',
+      color: '#654321',
+    });
+    const scrollFirst = vi.fn();
+    const scrollSecond = vi.fn();
+    first.scrollIntoView = scrollFirst;
+    second.scrollIntoView = scrollSecond;
+    root.append(first, second);
+    expect(scrollToCollaborationCaret(root, 'second')).toBe(true);
+    expect(scrollFirst).not.toHaveBeenCalled();
+    expect(scrollSecond).toHaveBeenCalledOnce();
+    const unsafe = renderCollaborationCaret({
+      id: 'third',
+      name: '<img src=x onerror=alert(1)>',
+      color: 'url(evil)',
+    });
+    expect(unsafe.querySelector('img')).toBeNull();
+    expect(unsafe.textContent).toBe('<img src=x onerror=alert(1)>');
+    expect(
+      renderCollaborationSelection({ color: 'url(evil)' }).style
+    ).not.toContain('evil');
+  });
+  it('renders a real Tiptap peer caret and highlights a remote range after Yjs sync', async () => {
+    const a = new Y.Doc();
+    const b = new Y.Doc();
+    const awarenessA = new Awareness(a);
+    const awarenessB = new Awareness(b);
+    const sync = 'wire';
+    a.on('update', (update, origin) => {
+      if (origin !== sync) Y.applyUpdate(b, update, sync);
+    });
+    b.on('update', (update, origin) => {
+      if (origin !== sync) Y.applyUpdate(a, update, sync);
+    });
+    for (const [source, target] of [
+      [awarenessA, awarenessB],
+      [awarenessB, awarenessA],
+    ] as const) {
+      source.on(
+        'update',
+        (
+          {
+            added,
+            updated,
+            removed,
+          }: { added: number[]; updated: number[]; removed: number[] },
+          origin: unknown
+        ) => {
+          if (origin !== sync)
+            applyAwarenessUpdate(
+              target,
+              encodeAwarenessUpdate(source, [...added, ...updated, ...removed]),
+              sync
+            );
+        }
+      );
+    }
+    const elements = [
+      document.createElement('div'),
+      document.createElement('div'),
+    ];
+    for (const element of elements) document.body.append(element);
+    const editors = [
+      [a, awarenessA, 'first'],
+      [b, awarenessB, 'second'],
+    ].map(
+      ([doc, awareness, id], index) =>
+        new Editor({
+          element: elements[index],
+          extensions: [
+            StarterKit.configure({ undoRedo: false }),
+            Collaboration.configure({
+              document: doc as Y.Doc,
+              field: 'prosemirror',
+            }),
+            CollaborationCaret.configure({
+              provider: { awareness },
+              user: { id, name: 'Alex', color: '#123456' },
+              render: renderCollaborationCaret,
+              selectionRender: renderCollaborationSelection,
+            }),
+          ],
+        })
+    );
+    try {
+      editors[0]!.commands.setContent('<p>Hello shared document</p>');
+      await waitFor(() =>
+        expect(editors[1]!.getText()).toBe('Hello shared document')
+      );
+      editors[0]!.view.focus();
+      editors[0]!.commands.setTextSelection({ from: 2, to: 6 });
+      await waitFor(() =>
+        expect(
+          elements[1]!.querySelector('.collaboration-carets__selection')
+        ).not.toBeNull()
+      );
+      expect(
+        elements[1]!.querySelector<HTMLElement>('.collaboration-carets__caret')
+          ?.dataset.userId
+      ).toBe('first');
+      expect(
+        elements[1]!.querySelector('.collaboration-carets__selection')
+          ?.textContent
+      ).toBe('ello');
+    } finally {
+      for (const editor of editors) editor.destroy();
+      awarenessA.destroy();
+      awarenessB.destroy();
+      a.destroy();
+      b.destroy();
+      for (const element of elements) element.remove();
+    }
+  });
+});