@tuturuuu/ui 0.32.0 → 0.34.0

package/src/components/ui/commercial-comparison.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import {
+  Check,
+  FlaskConical,
+  ListFilter,
+  SearchX,
+  SlidersHorizontal,
+} from '@tuturuuu/icons/lucide';
+import {
+  COMPARISON_FEATURES,
+  COMPARISON_TIERS,
+  type ComparisonTier,
+} from '@tuturuuu/utils/commercial-comparison';
+import { useId, useState } from 'react';
+import { Button } from './button';
+import { ComparisonTable } from './commercial-comparison-table';
+import { ComparisonToolbar } from './commercial-comparison-toolbar';
+
+export interface ComparisonCopy {
+  title: string;
+  description: string;
+  search: string;
+  allApps: string;
+  allCategories: string;
+  category: string;
+  app: string;
+  differences: string;
+  internal: string;
+  details: string;
+  reset: string;
+  empty: string;
+  results: string;
+  feature: string;
+  tiers: string;
+  pending: string;
+  included: string;
+  excluded: string;
+  preview: string;
+  contract: string;
+  seats: string;
+  internalValue: string;
+  features: Record<string, string>;
+  apps: Record<string, string>;
+  explanations: Record<string, string>;
+  categories: Record<string, string>;
+  tierNames: Record<ComparisonTier, string>;
+}
+
+export function CommercialComparison({ copy }: { copy: ComparisonCopy }) {
+  const id = useId();
+  const [query, setQuery] = useState('');
+  const [app, setApp] = useState('all');
+  const [category, setCategory] = useState('all');
+  const [differences, setDifferences] = useState(false);
+  const [internal, setInternal] = useState(false);
+  const [details, setDetails] = useState(false);
+  const [tiers, setTiers] = useState<ComparisonTier[]>(COMPARISON_TIERS);
+  const normalized = query
+    .normalize('NFD')
+    .replace(/\p{M}/gu, '')
+    .toLowerCase()
+    .replace(/đ/g, 'd')
+    .trim();
+  const visible = COMPARISON_FEATURES.filter((row) => {
+    if (!internal && row.category === 'internal') return false;
+    if (app !== 'all' && row.app !== app) return false;
+    if (category !== 'all' && row.category !== category) return false;
+    if (
+      differences &&
+      new Set(tiers.map((tier) => row.values[COMPARISON_TIERS.indexOf(tier)]))
+        .size < 2
+    )
+      return false;
+    const text = [
+      copy.features[row.id],
+      copy.apps[row.app],
+      copy.categories[row.category],
+      copy.explanations[row.detail],
+      ...row.values.map(valueLabel),
+    ]
+      .join(' ')
+      .normalize('NFD')
+      .replace(/\p{M}/gu, '')
+      .toLowerCase()
+      .replace(/đ/g, 'd');
+    return normalized.split(/\s+/).every((word) => text.includes(word));
+  });
+  const appIds = [
+    ...new Set(
+      COMPARISON_FEATURES.filter(
+        (row) => internal || row.category !== 'internal'
+      ).map((row) => row.app)
+    ),
+  ];
+  function reset() {
+    setQuery('');
+    setApp('all');
+    setCategory('all');
+    setDifferences(false);
+    setDetails(false);
+    setInternal(false);
+    setTiers(COMPARISON_TIERS);
+  }
+  function toggleTier(tier: ComparisonTier) {
+    setTiers((current) =>
+      current.includes(tier)
+        ? current.length > 1
+          ? current.filter((item) => item !== tier)
+          : current
+        : COMPARISON_TIERS.filter(
+            (item) => item === tier || current.includes(item)
+          )
+    );
+  }
+  function valueLabel(value: string) {
+    if (value === 'internal') return copy.internalValue;
+    if (
+      value === 'included' ||
+      value === 'excluded' ||
+      value === 'preview' ||
+      value === 'contract' ||
+      value === 'seats'
+    )
+      return copy[value];
+    return value;
+  }
+  return (
+    <section
+      aria-labelledby={`${id}-title`}
+      className="relative mt-16 min-w-0 scroll-mt-28 space-y-6 sm:mt-24"
+      id="compare-plans"
+    >
+      <div
+        className="pointer-events-none absolute -top-8 right-0 h-64 w-2/3 rounded-full bg-dynamic-blue/[0.04] blur-3xl"
+        aria-hidden
+      />
+      <div className="relative flex flex-wrap items-end justify-between gap-6 pb-3">
+        <div className="max-w-3xl space-y-4">
+          <span className="inline-flex items-center gap-2 font-mono-ui text-[0.65rem] text-dynamic-blue uppercase tracking-[0.18em]">
+            <SlidersHorizontal aria-hidden className="size-3.5" />
+            {copy.tiers}
+          </span>
+          <h3
+            className="text-balance font-display font-semibold text-3xl leading-[1.1] tracking-[-0.035em] sm:text-4xl lg:text-5xl"
+            id={`${id}-title`}
+          >
+            {copy.title}
+          </h3>
+          <p className="max-w-xl text-foreground/55 text-sm leading-relaxed sm:text-base">
+            {copy.description}
+          </p>
+        </div>
+      </div>
+      <ComparisonToolbar
+        copy={copy}
+        query={query}
+        app={app}
+        category={category}
+        differences={differences}
+        internal={internal}
+        details={details}
+        tiers={tiers}
+        appIds={appIds}
+        onQuery={setQuery}
+        onApp={setApp}
+        onCategory={setCategory}
+        onDifferences={setDifferences}
+        onDetails={setDetails}
+        onTier={toggleTier}
+        onReset={reset}
+        onInternal={(value) => {
+          setInternal(value);
+          setApp('all');
+          setCategory('all');
+        }}
+      />
+      <div className="flex flex-wrap items-center justify-between gap-3 px-1">
+        <p
+          aria-live="polite"
+          className="inline-flex items-center gap-2 text-foreground/55 text-xs"
+        >
+          <ListFilter aria-hidden className="size-3.5 text-dynamic-blue" />
+          {visible.length} {copy.results}
+        </p>
+        <div className="flex flex-wrap items-center gap-4 text-[0.65rem] text-foreground/50">
+          <span className="inline-flex items-center gap-1.5">
+            <Check aria-hidden className="size-3.5 text-dynamic-green" />
+            {copy.included}
+          </span>
+          <span className="inline-flex items-center gap-1.5">
+            <FlaskConical
+              aria-hidden
+              className="size-3.5 text-dynamic-orange"
+            />
+            {copy.preview}
+          </span>
+        </div>
+      </div>
+      {visible.length === 0 ? (
+        <div className="flex flex-col items-center rounded-2xl border border-foreground/10 border-dashed bg-foreground/[0.02] px-6 py-16 text-center">
+          <SearchX aria-hidden className="mb-4 size-8 text-foreground/30" />
+          <p className="text-foreground/65 text-sm">{copy.empty}</p>
+          <Button
+            variant="outline"
+            className="mt-5 rounded-full"
+            onClick={reset}
+          >
+            {copy.reset}
+          </Button>
+        </div>
+      ) : (
+        <ComparisonTable
+          copy={copy}
+          visible={visible}
+          tiers={tiers}
+          appIds={appIds}
+          details={details}
+          valueLabel={valueLabel}
+        />
+      )}
+    </section>
+  );
+}

package/src/components/ui/comparison-value.test.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { ComparisonValue } from './comparison-value';
+
+it('keeps a status icon compact and reveals its wording and scope on tap', async () => {
+  render(
+    <ComparisonValue
+      value="included"
+      label="Included"
+      context="Plus: Tasks"
+      explanation="Within your workspace limits"
+    />
+  );
+  const button = screen.getByRole('button', { name: 'Plus: Tasks: Included' });
+  expect(button.textContent).toBe('');
+  fireEvent.click(button);
+  await waitFor(() =>
+    expect(screen.getByRole('tooltip').textContent).toContain(
+      'Within your workspace limits'
+    )
+  );
+  fireEvent.keyDown(button, { key: 'Escape' });
+  await waitFor(() => expect(screen.queryByRole('tooltip')).toBeNull());
+});
+it('keeps numeric quotas visible instead of hiding the limit in an icon', () => {
+  render(
+    <ComparisonValue value="20 GiB" label="20 GiB" context="Plus: Drive" />
+  );
+  expect(
+    screen.getByRole('button', { name: 'Plus: Drive: 20 GiB' }).textContent
+  ).toBe('20 GiB');
+});

package/src/components/ui/comparison-value.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import {
+  Check,
+  Clock3,
+  FileText,
+  FlaskConical,
+  Gauge,
+  Info,
+  Minus,
+  Server,
+  Users,
+} from '@tuturuuu/icons/lucide';
+import { useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+
+const statusIcons = {
+  info: Info,
+  included: Check,
+  excluded: Minus,
+  preview: FlaskConical,
+  contract: FileText,
+  seats: Users,
+  internal: Server,
+  pending: Clock3,
+  limited: Gauge,
+};
+
+/** Keep quantities visible; status wording and scope stay accessible on focus or tap. */
+export function ComparisonValue({
+  value,
+  label,
+  context,
+  explanation,
+}: {
+  value: string;
+  label: string;
+  context: string;
+  explanation?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const Icon = statusIcons[value as keyof typeof statusIcons];
+  return (
+    <Tooltip open={open} onOpenChange={setOpen}>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={`${context}: ${label}`}
+          className={`inline-flex min-h-8 min-w-8 items-center justify-center rounded-md px-1.5 align-middle transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring ${value === 'excluded' ? 'text-foreground/25' : value === 'included' ? 'bg-dynamic-green/[0.08] text-dynamic-green' : value === 'preview' || value === 'pending' ? 'bg-dynamic-orange/[0.08] text-dynamic-orange' : value === 'info' ? 'text-foreground/35' : 'font-mono-ui text-foreground/80 text-xs tabular-nums'}`}
+          onClick={(event) => {
+            event.preventDefault();
+            setOpen(!open);
+          }}
+        >
+          {Icon ? (
+            <Icon
+              aria-hidden="true"
+              className="size-4"
+              strokeWidth={value === 'included' ? 2.5 : 1.75}
+            />
+          ) : (
+            label
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-72 space-y-1 text-left">
+        <p className="font-semibold">{label}</p>
+        {explanation && <p className="leading-relaxed">{explanation}</p>}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/components/ui/custom/__tests__/report-preview-pagination-progress.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, it } from 'vitest';
+import {
+  paginateReportBlocks,
+  parseReportSegments,
+} from '../report-preview-pagination';
+
+describe.each([20, 200])(
+  'report pagination progress with later page height %i',
+  (laterPageHeight) => {
+    it.each([
+      'Short feedback',
+      'Long feedback with spaces. '.repeat(12),
+      'x'.repeat(150),
+      '- First bullet\n- Second bullet that also cannot fit',
+    ])('finishes and preserves every character: %s', (text) => {
+      const segments = parseReportSegments(text, 'feedback');
+      let measurements = 0;
+      const pages = paginateReportBlocks({
+        blocks: [
+          {
+            key: 'feedback',
+            kind: 'rich-text',
+            splittable: true,
+            title: 'Feedback',
+            tone: 'neutral',
+            segments,
+          },
+        ],
+        firstPageHeight: 1,
+        laterPageHeight,
+        pageGap: 16,
+        measureBlock: () => {
+          // Fail deterministically instead of hanging the test runner if the
+          // fallback retries the same unconsumed segment forever.
+          if (++measurements > 500)
+            throw new Error('Pagination made no progress');
+          return 100;
+        },
+      });
+
+      const rendered = pages
+        .flatMap((page) => page.blocks)
+        .flatMap((block) => block.segments);
+      for (const source of segments) {
+        expect(
+          rendered
+            .filter((segment) => segment.id === source.id)
+            .map((segment) => segment.text)
+            .join('')
+        ).toBe(source.text);
+      }
+      expect(pages.length).toBeLessThanOrEqual(text.length);
+    });
+  }
+);
+
+it.each([0, 1, 20, 60, 200])(
+  'preserves mixed report sections with a %i-pixel page budget',
+  (pageHeight) => {
+    const content = parseReportSegments('Tiến bộ tốt. '.repeat(20), 'content');
+    const feedback = parseReportSegments('- Review\n\n- Practice', 'feedback');
+    let measurements = 0;
+    const pages = paginateReportBlocks({
+      blocks: [
+        {
+          key: 'empty',
+          kind: 'rich-text',
+          splittable: true,
+          title: 'Empty',
+          tone: 'neutral',
+          segments: [],
+        },
+        {
+          key: 'content',
+          kind: 'rich-text',
+          splittable: true,
+          title: 'Content',
+          tone: 'primary',
+          segments: content,
+        },
+        {
+          key: 'feedback',
+          kind: 'rich-text',
+          splittable: true,
+          title: 'Feedback',
+          tone: 'neutral',
+          segments: feedback,
+        },
+        {
+          key: 'closing',
+          kind: 'atomic',
+          splittable: false,
+          title: 'Closing',
+          tone: 'accent',
+          segments: parseReportSegments('Thank you', 'closing'),
+        },
+      ],
+      firstPageHeight: pageHeight,
+      laterPageHeight: pageHeight,
+      pageGap: 16,
+      measureBlock: ({ segments }) => {
+        if (++measurements > 1000)
+          throw new Error('Pagination made no progress');
+        return (
+          40 +
+          segments.reduce((height, segment) => height + segment.text.length, 0)
+        );
+      },
+    });
+    const output = pages
+      .flatMap((page) => page.blocks)
+      .flatMap((block) => block.segments);
+    for (const segment of [...content, ...feedback].filter(
+      (entry) => entry.kind !== 'spacer'
+    )) {
+      expect(
+        output
+          .filter((entry) => entry.id === segment.id)
+          .map((entry) => entry.text)
+          .join('')
+      ).toBe(segment.text);
+    }
+    expect(
+      output
+        .filter((segment) => segment.id === 'closing-paragraph-0')
+        .map((segment) => segment.text)
+    ).toEqual(['Thank you']);
+  }
+);

package/src/components/ui/custom/__tests__/report-preview-viewport.test.tsx

@@ -0,0 +1,56 @@
+import { act, render } from '@testing-library/react';
+import { afterEach, expect, it, vi } from 'vitest';
+import { ReportPreviewViewport } from '../report-preview-viewport';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+it('fits the visible sheet when the panel shrinks and never enlarges A4', () => {
+  let width = 400;
+  let resize = () => {};
+  const disconnect = vi.fn();
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      constructor(callback: () => void) {
+        resize = callback;
+      }
+      observe() {}
+      disconnect = disconnect;
+    }
+  );
+  vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(
+    () => width
+  );
+  vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(800);
+  const { container, unmount } = render(
+    <ReportPreviewViewport>
+      <div>Report</div>
+    </ReportPreviewViewport>
+  );
+  const sheet = container.querySelector('[style]') as HTMLElement;
+  expect(sheet.style.zoom).toBe('0.5');
+  width = 320;
+  act(() => resize());
+  expect(sheet.style.zoom).toBe('0.4');
+  width = 1000;
+  act(() => resize());
+  expect(sheet.style.zoom).toBe('1');
+  unmount();
+  expect(disconnect).toHaveBeenCalledOnce();
+});
+
+it('renders and performs the initial fit without ResizeObserver', () => {
+  vi.stubGlobal('ResizeObserver', undefined);
+  vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(400);
+  vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(800);
+  const { container } = render(
+    <ReportPreviewViewport>
+      <div>Report</div>
+    </ReportPreviewViewport>
+  );
+  expect((container.querySelector('[style]') as HTMLElement).style.zoom).toBe(
+    '0.5'
+  );
+});

package/src/components/ui/custom/account-assurance-refresh.test.tsx

@@ -0,0 +1,42 @@
+import {
+  focusManager,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { AccountAssuranceRefresh } from './account-assurance-refresh';
+
+const getProfile = vi.hoisted(() => vi.fn());
+vi.mock('@tuturuuu/internal-api/users', () => ({
+  getCurrentUserProfile: getProfile,
+}));
+vi.mock('next/navigation', () => ({ usePathname: () => '/personal' }));
+beforeEach(() => {
+  getProfile.mockReset();
+  focusManager.setFocused(true);
+});
+afterEach(() => focusManager.setFocused(undefined));
+function mount() {
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <AccountAssuranceRefresh />
+      <p>cached workspace</p>
+    </QueryClientProvider>
+  );
+}
+it('keeps cached content visible and revalidates on focus', async () => {
+  getProfile.mockResolvedValue({ id: 'actor' });
+  mount();
+  expect(screen.getByText('cached workspace')).toBeTruthy();
+  await waitFor(() => expect(getProfile).toHaveBeenCalledTimes(1));
+  focusManager.setFocused(false);
+  focusManager.setFocused(true);
+  await waitFor(() => expect(getProfile).toHaveBeenCalledTimes(2));
+});
+it('does not block optional cached content when offline', async () => {
+  getProfile.mockRejectedValue(new Error('Offline'));
+  mount();
+  await waitFor(() => expect(getProfile).toHaveBeenCalledOnce());
+  expect(screen.getByText('cached workspace')).toBeTruthy();
+});

package/src/components/ui/custom/account-assurance-refresh.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { getCurrentUserProfile } from '@tuturuuu/internal-api/users';
+import { usePathname } from 'next/navigation';
+
+/** Recheck on reconnect/resume without blocking optional accounts' cached UI.
+ * The internal API routes MFA_REQUIRED through the server auth proxy. Offline
+ * clients cannot discover a policy/recovery change until they reconnect.
+ */
+export function AccountAssuranceRefresh() {
+  const pathname = usePathname();
+  const protectedPage = Boolean(
+    pathname &&
+      !/^\/(?:en|vi)?\/?$/.test(pathname) &&
+      !/(?:^|\/)(?:login|verify-token|auth)(?:\/|$)/.test(pathname)
+  );
+  useQuery({
+    queryKey: ['account-assurance-refresh'],
+    queryFn: () => getCurrentUserProfile(),
+    enabled: protectedPage,
+    staleTime: 0,
+    gcTime: 0,
+    retry: false,
+    refetchOnWindowFocus: 'always',
+    refetchOnReconnect: 'always',
+    throwOnError: false,
+  });
+  return null;
+}

package/src/components/ui/custom/education/modules/resources/pdf-viewer.tsx

@@ -12,7 +12,13 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   `https://unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`
 ).toString();
 
-export function PDFViewer({ url }: { url: string }) {
+export function PDFViewer({
+  onLoadError,
+  url,
+}: {
+  onLoadError?: () => void;
+  url: string;
+}) {
   const t = useTranslations();
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -47,7 +53,12 @@ export function PDFViewer({ url }: { url: string }) {
 
   return (
     <div ref={containerRef} className="relative">
-      <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
+      <Document
+        suspense={false}
+        file={url}
+        onLoadError={onLoadError}
+        onLoadSuccess={onDocumentLoadSuccess}
+      >
         <AnimatePresence mode="wait">
           <motion.div
             key={pageNumber}

package/src/components/ui/custom/report-preview-pagination.ts

@@ -478,14 +478,16 @@ export function paginateReportBlocks({
               Math.max(1, refineSplitBoundary(forcedSegment.text, 48))
             )
           );
+        // Consume the head we actually emitted. When nothing fits, the split
+        // result retains the entire source as its tail; reusing that tail here
+        // would repeat the same segment forever and freeze the report editor.
         const tailSegment =
-          forcedSplit.tailSegment ??
-          (headSegment.text.length < forcedSegment.text.length
+          headSegment.text.length < forcedSegment.text.length
             ? cloneSegment(
                 forcedSegment,
                 forcedSegment.text.slice(headSegment.text.length)
               )
-            : null);
+            : null;
         const forcedHeight =
           forcedSplit.height ||
           measureBlock({

package/src/components/ui/custom/report-preview-viewport.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+
+/** Scale only the on-screen sheet; export and pagination measurement stay at A4. */
+export function ReportPreviewViewport({ children }: { children: ReactNode }) {
+  const container = useRef<HTMLDivElement>(null);
+  const sheet = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(1);
+  useEffect(() => {
+    const parent = container.current;
+    const page = sheet.current;
+    if (!parent || !page) return;
+    const resize = () => {
+      const width = page.offsetWidth;
+      if (width > 0 && parent.clientWidth > 0) {
+        setScale(Math.min(1, parent.clientWidth / width));
+      }
+    };
+    resize();
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(resize);
+    observer.observe(parent);
+    return () => observer.disconnect();
+  }, []);
+  return (
+    <div
+      ref={container}
+      className="w-full min-w-0 overflow-hidden print:hidden"
+    >
+      <div
+        ref={sheet}
+        className="mx-auto flex w-[210mm] flex-col gap-6"
+        style={{ zoom: scale }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}