@tuturuuu/ui 0.19.1 → 0.20.1

package/src/globals.css

@@ -442,6 +442,172 @@
   --animate-accordion-up: accordion-up 0.2s ease-out;
   --animate-aurora: aurora 80s linear infinite;
   --animate-shake: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  --animate-bloom-drift: bloom-drift 24s ease-in-out infinite;
+  --animate-bloom-drift-slow: bloom-drift-slow 32s ease-in-out infinite;
+  --animate-sheen: sheen 6s ease-in-out infinite;
+  --animate-rise-in: rise-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
+  --animate-text-sheen: text-sheen 8s ease-in-out infinite;
+  --animate-marquee: marquee 40s linear infinite;
+  --animate-float-y: float-y 6s ease-in-out infinite;
+  --animate-scroll-cue: scroll-cue 2.2s ease-in-out infinite;
+  --animate-ring-pulse: ring-pulse 3s ease-out infinite;
+  --animate-day-scan: day-scan 9s ease-in-out infinite;
+
+  /* Marketing type scale. The variables resolve only where the marketing
+     layout loads the fonts; everywhere else these fall back to the app font. */
+  /* The inner fallbacks matter: apps that do not load the marketing faces
+     (nova, meet) would otherwise hit an undefined var and drop the whole
+     font-family declaration. */
+  --font-display:
+    var(--font-be-vietnam-pro, ui-sans-serif), ui-sans-serif, system-ui,
+    sans-serif;
+  --font-mono-ui:
+    var(--font-jetbrains-mono, ui-monospace), ui-monospace, SFMono-Regular,
+    Menlo, monospace;
+}
+
+/* Marketing atmosphere: slow, low-amplitude drift for hero light blooms. */
+@keyframes bloom-drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(4%, -3%, 0) scale(1.08);
+  }
+}
+
+@keyframes bloom-drift-slow {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1.05);
+  }
+  50% {
+    transform: translate3d(-5%, 4%, 0) scale(1);
+  }
+}
+
+@keyframes sheen {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 0.75;
+  }
+}
+
+/* Hero entrance. Paired with an inline animation-delay for stagger, so the
+   choreography needs no JavaScript and runs before hydration. */
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 24px, 0);
+    filter: blur(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    filter: blur(0);
+  }
+}
+
+/* Slow light travelling through gradient headline text. */
+@keyframes text-sheen {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* Product marquee: the track holds two identical halves, so -50% loops
+   seamlessly. */
+@keyframes marquee {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(-50%, 0, 0);
+  }
+}
+
+@keyframes float-y {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(0, -10px, 0);
+  }
+}
+
+@keyframes scroll-cue {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -6px, 0);
+  }
+  40% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 10px, 0);
+  }
+}
+
+/* Restless light crossing the fragmented day on the landing page. Driving
+   background-position (rather than a transform) keeps the highlight clipped to
+   the strip, so it never has to be masked. Symmetric endpoints let it sweep
+   out and back on one eased loop with no seam. */
+@keyframes day-scan {
+  0%,
+  100% {
+    background-position: 130% 0;
+  }
+  50% {
+    background-position: -30% 0;
+  }
+}
+
+@keyframes ring-pulse {
+  0% {
+    opacity: 0.6;
+    transform: scale(0.85);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.6);
+  }
+}
+
+/* Global guard: the marketing atmosphere and entrance choreography are
+   decorative, so drop them entirely when the user asks for less motion. */
+@media (prefers-reduced-motion: reduce) {
+  .animate-rise-in,
+  .animate-text-sheen,
+  .animate-marquee,
+  .animate-float-y,
+  .animate-scroll-cue,
+  .animate-ring-pulse,
+  .animate-day-scan,
+  .animate-bloom-drift,
+  .animate-bloom-drift-slow,
+  .animate-sheen,
+  .animate-aurora {
+    /*
+     * Cancelling the animation is enough, and is all we should do. These
+     * elements carry layout transforms (`-translate-x-1/2` centres the hero
+     * blooms) and deliberate opacities (blooms sit at 40-60%), so forcing
+     * `transform: none` / `opacity: 1` here would shift them off-centre and
+     * blow out their brightness. Entrance keyframes use `both`, so removing
+     * the animation simply leaves the element in its natural, final state.
+     */
+    /* biome-ignore lint/complexity/noImportantStyles: must beat utility-class animations for accessibility */
+    animation: none !important;
+  }
 }
 
 /* Aurora animation - must be outside @theme block */

package/src/hooks/__tests__/use-workspace-identity-mutation.test.tsx

@@ -0,0 +1,181 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  patchWorkspaceCacheValue,
+  useUpdateWorkspaceIdentity,
+} from '../use-workspace-identity-mutation';
+
+const WS_ID = 'ws-1';
+
+const mocks = vi.hoisted(() => ({
+  refresh: vi.fn(),
+  updateWorkspace: vi.fn(),
+}));
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ refresh: mocks.refresh }),
+}));
+
+vi.mock('@tuturuuu/internal-api/workspaces', () => ({
+  updateWorkspace: (...args: unknown[]) => mocks.updateWorkspace(...args),
+}));
+
+function createHarness() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  // The surfaces that show a workspace name, as each one caches it.
+  queryClient.setQueryData(
+    ['workspaces'],
+    [
+      { id: WS_ID, name: 'Old name' },
+      { id: 'ws-2', name: 'Other workspace' },
+    ]
+  );
+  queryClient.setQueryData(['workspace', WS_ID], {
+    workspace: { handle: 'old-handle', id: WS_ID, name: 'Old name' },
+  });
+  queryClient.setQueryData(['workspace-select-current-workspace', WS_ID], {
+    id: WS_ID,
+    name: 'Old name',
+  });
+  queryClient.setQueryData(['unrelated'], { id: WS_ID, name: 'Old name' });
+
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  return { queryClient, wrapper };
+}
+
+describe('patchWorkspaceCacheValue', () => {
+  it('patches the record, arrays of records, and wrapped shapes', () => {
+    const patch = { name: 'New name' };
+
+    expect(
+      patchWorkspaceCacheValue({ id: WS_ID, name: 'Old' }, WS_ID, patch)
+    ).toEqual({ id: WS_ID, name: 'New name' });
+
+    expect(
+      patchWorkspaceCacheValue([{ id: WS_ID, name: 'Old' }], WS_ID, patch)
+    ).toEqual([{ id: WS_ID, name: 'New name' }]);
+
+    expect(
+      patchWorkspaceCacheValue(
+        { workspace: { id: WS_ID, name: 'Old' } },
+        WS_ID,
+        patch
+      )
+    ).toEqual({ workspace: { id: WS_ID, name: 'New name' } });
+  });
+
+  it('leaves other workspaces and unknown shapes alone', () => {
+    const other = { id: 'ws-2', name: 'Other' };
+    expect(patchWorkspaceCacheValue(other, WS_ID, { name: 'New' })).toBe(other);
+    expect(patchWorkspaceCacheValue(null, WS_ID, { name: 'New' })).toBeNull();
+    expect(patchWorkspaceCacheValue('text', WS_ID, { name: 'New' })).toBe(
+      'text'
+    );
+  });
+});
+
+describe('useUpdateWorkspaceIdentity', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.updateWorkspace.mockResolvedValue({ id: WS_ID });
+  });
+
+  // Regression: renaming a workspace used to only call `router.refresh()`, which
+  // re-renders server markup but leaves client caches untouched — so the
+  // workspace selector kept the old name until the user reloaded the page.
+  it('renames the workspace everywhere it is cached', async () => {
+    const { queryClient, wrapper } = createHarness();
+    const { result } = renderHook(
+      () => useUpdateWorkspaceIdentity({ workspaceId: WS_ID }),
+      { wrapper }
+    );
+
+    await act(async () => {
+      await result.current.mutateAsync({ name: 'New name' });
+    });
+
+    expect(queryClient.getQueryData(['workspaces'])).toEqual([
+      { id: WS_ID, name: 'New name' },
+      { id: 'ws-2', name: 'Other workspace' },
+    ]);
+    expect(queryClient.getQueryData(['workspace', WS_ID])).toEqual({
+      workspace: { handle: 'old-handle', id: WS_ID, name: 'New name' },
+    });
+    expect(
+      queryClient.getQueryData(['workspace-select-current-workspace', WS_ID])
+    ).toEqual({ id: WS_ID, name: 'New name' });
+  });
+
+  it('refreshes server-rendered surfaces too', async () => {
+    const { wrapper } = createHarness();
+    const { result } = renderHook(
+      () => useUpdateWorkspaceIdentity({ workspaceId: WS_ID }),
+      { wrapper }
+    );
+
+    await act(async () => {
+      await result.current.mutateAsync({ name: 'New name' });
+    });
+
+    await waitFor(() => expect(mocks.refresh).toHaveBeenCalledTimes(1));
+  });
+
+  it('updates the cache before the request resolves', async () => {
+    const { queryClient, wrapper } = createHarness();
+    let resolveUpdate: (value: unknown) => void = () => {};
+    mocks.updateWorkspace.mockReturnValue(
+      new Promise((resolve) => {
+        resolveUpdate = resolve;
+      })
+    );
+
+    const { result } = renderHook(
+      () => useUpdateWorkspaceIdentity({ workspaceId: WS_ID }),
+      { wrapper }
+    );
+
+    await act(async () => {
+      void result.current.mutateAsync({ name: 'Optimistic name' });
+      await Promise.resolve();
+    });
+
+    expect(queryClient.getQueryData(['workspaces'])).toEqual([
+      { id: WS_ID, name: 'Optimistic name' },
+      { id: 'ws-2', name: 'Other workspace' },
+    ]);
+
+    await act(async () => {
+      resolveUpdate({ id: WS_ID });
+    });
+  });
+
+  it('rolls the caches back when the rename fails', async () => {
+    const { queryClient, wrapper } = createHarness();
+    const onError = vi.fn();
+    mocks.updateWorkspace.mockRejectedValue(new Error('nope'));
+
+    const { result } = renderHook(
+      () => useUpdateWorkspaceIdentity({ onError, workspaceId: WS_ID }),
+      { wrapper }
+    );
+
+    await act(async () => {
+      await result.current.mutateAsync({ name: 'New name' }).catch(() => {});
+    });
+
+    expect(queryClient.getQueryData(['workspaces'])).toEqual([
+      { id: WS_ID, name: 'Old name' },
+      { id: 'ws-2', name: 'Other workspace' },
+    ]);
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(mocks.refresh).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/use-workspace-identity-mutation.ts

@@ -0,0 +1,136 @@
+'use client';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { updateWorkspace } from '@tuturuuu/internal-api/workspaces';
+import { useRouter } from 'next/navigation';
+
+export interface WorkspaceIdentityPatch {
+  handle?: string;
+  name?: string;
+}
+
+interface QueryKeyFilter {
+  queryKey: readonly unknown[];
+}
+
+/**
+ * Matches every cached query that can carry this workspace's name or handle.
+ *
+ * The workspace selector reads `['workspaces']`, satellite panels read
+ * `['workspace', wsId]`, and the selector's fallback reads
+ * `['workspace-select-current-workspace', wsId]` — so match by the well-known
+ * roots plus any key mentioning the workspace id.
+ */
+export function createWorkspaceQueryFilter(workspaceId: string) {
+  return {
+    predicate: ({ queryKey }: QueryKeyFilter) =>
+      queryKey[0] === 'workspaces' ||
+      queryKey[0] === 'user-workspaces' ||
+      queryKey.includes(workspaceId),
+  };
+}
+
+/**
+ * Apply a patch to any shape a workspace can take inside a cached value: the
+ * record itself, an array of records, or a wrapper such as `{ data }`,
+ * `{ workspace }` or `{ workspaces }`.
+ */
+export function patchWorkspaceCacheValue(
+  value: unknown,
+  workspaceId: string,
+  patch: WorkspaceIdentityPatch
+): unknown {
+  if (Array.isArray(value)) {
+    let changed = false;
+    const nextArray = value.map((entry) => {
+      const nextEntry = patchWorkspaceCacheValue(entry, workspaceId, patch);
+      if (nextEntry !== entry) changed = true;
+      return nextEntry;
+    });
+
+    return changed ? nextArray : value;
+  }
+
+  if (!value || typeof value !== 'object') {
+    return value;
+  }
+
+  const record = value as Record<string, unknown>;
+  if (record.id === workspaceId) {
+    return { ...record, ...patch };
+  }
+
+  let changed = false;
+  const nextRecord = { ...record };
+  for (const key of ['data', 'workspace', 'workspaces'] as const) {
+    if (!(key in record)) continue;
+    const nextValue = patchWorkspaceCacheValue(record[key], workspaceId, patch);
+    if (nextValue !== record[key]) {
+      nextRecord[key] = nextValue;
+      changed = true;
+    }
+  }
+
+  return changed ? nextRecord : value;
+}
+
+/**
+ * Rename a workspace and make every surface agree, without a page reload.
+ *
+ * A workspace name is read from two independent places: client caches (the
+ * workspace selector, settings panels) and server-rendered markup (sidebars,
+ * headers). `router.refresh()` only refreshes the second, so a form that just
+ * calls it leaves the selector showing the old name until the user reloads —
+ * which is exactly what shipped in `apps/web`. This does all three steps:
+ * patch the caches optimistically, revalidate them, and refresh the server tree.
+ *
+ * Every app's settings dialog should mutate the workspace through this hook, so
+ * the propagation rules live in one place rather than being re-derived per app.
+ */
+export function useUpdateWorkspaceIdentity({
+  onError,
+  onSuccess,
+  workspaceId,
+}: {
+  onError?: (error: unknown) => void;
+  onSuccess?: (patch: WorkspaceIdentityPatch) => void;
+  workspaceId: string;
+}) {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const workspaceQueryFilter = createWorkspaceQueryFilter(workspaceId);
+
+  return useMutation({
+    mutationFn: (values: WorkspaceIdentityPatch) =>
+      updateWorkspace(workspaceId, values as { handle?: string; name: string }),
+    onError: (error, _values, context) => {
+      for (const [queryKey, previous] of context?.previousQueries ?? []) {
+        queryClient.setQueryData(queryKey, previous);
+      }
+
+      onError?.(error);
+    },
+    onMutate: async (values: WorkspaceIdentityPatch) => {
+      await queryClient.cancelQueries(workspaceQueryFilter);
+      const previousQueries = queryClient.getQueriesData(workspaceQueryFilter);
+
+      queryClient.setQueriesData(workspaceQueryFilter, (previous) =>
+        patchWorkspaceCacheValue(previous, workspaceId, values)
+      );
+
+      return { previousQueries };
+    },
+    onSuccess: async (_response, values: WorkspaceIdentityPatch) => {
+      queryClient.setQueriesData(workspaceQueryFilter, (previous) =>
+        patchWorkspaceCacheValue(previous, workspaceId, values)
+      );
+
+      await queryClient.invalidateQueries(workspaceQueryFilter);
+      // Server-rendered surfaces (sidebar header, page titles) need this; the
+      // cache work above is what keeps the client-side selector honest.
+      router.refresh();
+
+      onSuccess?.(values);
+    },
+  });
+}