@tuturuuu/ui 0.30.0 → 0.30.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.30.2](https://github.com/tutur3u/platform/compare/ui-v0.30.1...ui-v0.30.2) (2026-08-31)
+
+
+### Bug Fixes
+
+* **finance:** allow advance subscription invoices ([d307068](https://github.com/tutur3u/platform/commit/d3070683a7c74b9f18f65dabdf482132fa02cf13))
+* **tasks:** restore description checklist controls ([7976f78](https://github.com/tutur3u/platform/commit/7976f78292237e8047509e4243dafa14acea1b54))
+
+## [0.30.1](https://github.com/tutur3u/platform/compare/ui-v0.30.0...ui-v0.30.1) (2026-08-27)
+
+
+### Bug Fixes
+
+* **forms:** repair the landing demo, the brand lockup and two analytics labels ([3f16968](https://github.com/tutur3u/platform/commit/3f16968f5802ebbd518ee27025c61a759839fd4e))
+* **forms:** repair the landing demo, the brand lockup and two analytics labels ([#5164](https://github.com/tutur3u/platform/issues/5164)) ([56d7f62](https://github.com/tutur3u/platform/commit/56d7f62325a8ec0caa5bb3ccd76b050dd66b1e53))
+
 ## [0.30.0](https://github.com/tutur3u/platform/compare/ui-v0.29.2...ui-v0.30.0) (2026-08-26)
 
 

package/biome.json

@@ -1,5 +1,5 @@
 {
   "root": false,
-  "$schema": "https://biomejs.dev/schemas/2.5.10/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.5.11/schema.json",
   "extends": "//"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.30.0",
+  "version": "0.30.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -57,43 +57,43 @@
     "@streamdown/mermaid": "^1.0.2",
     "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-pacer": "^0.23.0",
-    "@tanstack/react-query": "^5.101.2",
-    "@tanstack/react-table": "^9.0.0",
+    "@tanstack/react-query": "^5.102.8",
+    "@tanstack/react-table": "^9.2.3",
     "@tanstack/react-virtual": "^3.14.10",
-    "@tiptap/core": "3.30.2",
-    "@tiptap/extension-collaboration": "3.30.2",
-    "@tiptap/extension-collaboration-caret": "3.30.2",
-    "@tiptap/extension-color": "3.30.2",
-    "@tiptap/extension-details": "3.30.2",
-    "@tiptap/extension-drag-handle": "3.30.2",
-    "@tiptap/extension-drag-handle-react": "3.30.2",
-    "@tiptap/extension-highlight": "3.30.2",
-    "@tiptap/extension-horizontal-rule": "3.30.2",
-    "@tiptap/extension-image": "3.30.2",
-    "@tiptap/extension-link": "3.30.2",
-    "@tiptap/extension-list": "3.30.2",
-    "@tiptap/extension-node-range": "3.30.2",
-    "@tiptap/extension-placeholder": "3.30.2",
-    "@tiptap/extension-strike": "3.30.2",
-    "@tiptap/extension-subscript": "3.30.2",
-    "@tiptap/extension-superscript": "3.30.2",
-    "@tiptap/extension-table": "3.30.2",
-    "@tiptap/extension-table-cell": "3.30.2",
-    "@tiptap/extension-table-header": "3.30.2",
-    "@tiptap/extension-table-row": "3.30.2",
-    "@tiptap/extension-text-align": "3.30.2",
-    "@tiptap/extension-text-style": "3.30.2",
-    "@tiptap/extension-youtube": "3.30.2",
-    "@tiptap/pm": "3.30.2",
-    "@tiptap/react": "3.30.2",
-    "@tiptap/starter-kit": "3.30.2",
+    "@tiptap/core": "3.30.5",
+    "@tiptap/extension-collaboration": "3.30.5",
+    "@tiptap/extension-collaboration-caret": "3.30.5",
+    "@tiptap/extension-color": "3.30.5",
+    "@tiptap/extension-details": "3.30.5",
+    "@tiptap/extension-drag-handle": "3.30.5",
+    "@tiptap/extension-drag-handle-react": "3.30.5",
+    "@tiptap/extension-highlight": "3.30.5",
+    "@tiptap/extension-horizontal-rule": "3.30.5",
+    "@tiptap/extension-image": "3.30.5",
+    "@tiptap/extension-link": "3.30.5",
+    "@tiptap/extension-list": "3.30.5",
+    "@tiptap/extension-node-range": "3.30.5",
+    "@tiptap/extension-placeholder": "3.30.5",
+    "@tiptap/extension-strike": "3.30.5",
+    "@tiptap/extension-subscript": "3.30.5",
+    "@tiptap/extension-superscript": "3.30.5",
+    "@tiptap/extension-table": "3.30.5",
+    "@tiptap/extension-table-cell": "3.30.5",
+    "@tiptap/extension-table-header": "3.30.5",
+    "@tiptap/extension-table-row": "3.30.5",
+    "@tiptap/extension-text-align": "3.30.5",
+    "@tiptap/extension-text-style": "3.30.5",
+    "@tiptap/extension-youtube": "3.30.5",
+    "@tiptap/pm": "3.30.5",
+    "@tiptap/react": "3.30.5",
+    "@tiptap/starter-kit": "3.30.5",
     "@tuturuuu/ai": "0.8.3",
     "@tuturuuu/apis": "0.11.3",
     "@tuturuuu/hooks": "0.1.1",
     "@tuturuuu/icons": "0.1.0",
     "@tuturuuu/internal-api": "0.33.0",
     "@tuturuuu/supabase": "0.5.1",
-    "@tuturuuu/utils": "0.26.0",
+    "@tuturuuu/utils": "0.27.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -108,18 +108,18 @@
     "framer-motion": "^13.1.1",
     "gsap": "^3.15.0",
     "html-entities": "^2.6.0",
-    "html2canvas-pro": "^2.3.9",
+    "html2canvas-pro": "^2.4.0",
     "input-otp": "^1.5.0",
     "katex": "^0.18.4",
     "lodash": "4.18.1",
     "moment": "^2.30.1",
     "motion": "^13.1.1",
-    "next": "^16.3.2",
-    "next-intl": "^4.13.7",
+    "next": "^16.3.3",
+    "next-intl": "^4.14.1",
     "next-themes": "^0.4.6",
-    "nuqs": "^2.10.0",
+    "nuqs": "^2.10.1",
     "prosemirror-state": "^1.4.4",
-    "prosemirror-view": "1.42.2",
+    "prosemirror-view": "1.42.3",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.8",
     "react-colorful": "^5.8.0",
@@ -136,7 +136,7 @@
     "recharts": "3.10.1",
     "slot-text": "^0.3.4",
     "sonner": "^2.0.8",
-    "streamdown": "^2.5.0",
+    "streamdown": "^2.6.0",
     "tailwind-scrollbar": "^4.0.2",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
@@ -150,21 +150,21 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/typography": "^0.5.20",
-    "@tanstack/react-query": "^5.102.1",
-    "@tanstack/react-table": "^9.1.2",
+    "@tanstack/react-query": "^5.102.8",
+    "@tanstack/react-table": "^9.2.3",
     "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/react": "^16.3.3",
     "@tuturuuu/types": "0.28.0",
     "@tuturuuu/typescript-config": "0.1.2",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.25",
-    "@types/node": "^26.2.0",
+    "@types/node": "^26.4.0",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@types/react-dom": "^19.2.5",
     "@types/react-resizable": "^4.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^11.0.0",
-    "@vitejs/plugin-react": "^6.1.0",
+    "@vitejs/plugin-react": "^6.1.1",
     "autoprefixer": "^10.5.4",
     "jsdom": "^30.0.1",
     "postcss": "^8.5.26",
@@ -313,6 +313,10 @@
       "types": "./src/components/ui/custom/system-language-wrapper.tsx",
       "import": "./src/components/ui/custom/system-language-wrapper.tsx"
     },
+    "./custom/tuturuuu-wordmark": {
+      "types": "./src/components/ui/custom/tuturuuu-wordmark.tsx",
+      "import": "./src/components/ui/custom/tuturuuu-wordmark.tsx"
+    },
     "./custom/tuturuuu-logo": {
       "types": "./src/components/ui/custom/tuturuuu-logo.tsx",
       "import": "./src/components/ui/custom/tuturuuu-logo.tsx"

package/src/components/ui/custom/__tests__/tuturuuu-wordmark.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { toProductName } from '../tuturuuu-wordmark';
+
+describe('toProductName', () => {
+  it('strips the company name from a full app name', () => {
+    expect(toProductName('Tuturuuu Forms')).toBe('Forms');
+    expect(toProductName('Tuturuuu Calendar')).toBe('Calendar');
+  });
+
+  it('is case-insensitive and tolerates extra spacing', () => {
+    expect(toProductName('TUTURUUU  Forms')).toBe('Forms');
+  });
+
+  it('leaves a bare product name alone', () => {
+    expect(toProductName('Forms')).toBe('Forms');
+  });
+
+  it('returns the name unchanged when stripping would empty it', () => {
+    // Otherwise the lockup renders with a blank second line.
+    expect(toProductName('Tuturuuu')).toBe('Tuturuuu');
+  });
+});

package/src/components/ui/custom/tuturuuu-wordmark.tsx

@@ -0,0 +1,72 @@
+import { cn } from '@tuturuuu/utils/format';
+import { TuturuuLogo } from './tuturuuu-logo';
+
+/**
+ * The Tuturuuu product lockup: mark, then "Tuturuuu" over the product name.
+ *
+ * Two lines rather than one string. "Tuturuuu Forms" set on a single line reads
+ * as one long product name; stacking it says what it is — a Tuturuuu product
+ * called Forms — and keeps the company name consistent across products while
+ * only the second line changes.
+ *
+ * The logo deliberately does not take a local `src`. Satellites are served from
+ * their own domains and do not carry `/media`, so a local path 404s there; the
+ * component's default is the absolute URL for exactly that reason.
+ */
+export function TuturuuuWordmark({
+  className,
+  product,
+  size = 'md',
+}: {
+  className?: string;
+  /** The second line — the product name, without "Tuturuuu" in front of it. */
+  product: string;
+  size?: 'sm' | 'md';
+}) {
+  const dimension = size === 'sm' ? 28 : 32;
+
+  return (
+    <span className={cn('flex items-center gap-2.5', className)}>
+      <TuturuuLogo
+        alt=""
+        aria-hidden
+        className={cn('object-contain', size === 'sm' ? 'h-7 w-7' : 'h-8 w-8')}
+        height={dimension}
+        width={dimension}
+      />
+      <span className="flex flex-col text-left leading-none">
+        <span
+          className={cn(
+            'uppercase tracking-[0.24em] opacity-70',
+            size === 'sm' ? 'text-[9px]' : 'text-[10px]'
+          )}
+        >
+          Tuturuuu
+        </span>
+        <span
+          className={cn(
+            'font-display font-semibold uppercase tracking-[0.08em]',
+            size === 'sm' ? 'text-sm' : 'text-lg'
+          )}
+        >
+          {product}
+        </span>
+      </span>
+    </span>
+  );
+}
+
+/**
+ * The product line of a full app name: "Tuturuuu Forms" -> "Forms".
+ *
+ * Exists so the nav and the footer cannot disagree. They derive the same label
+ * from the same prop, and two copies of one regex is exactly the kind of
+ * duplication that drifts when only one of them is updated.
+ *
+ * A name that is only "Tuturuuu" is returned unchanged rather than reduced to
+ * an empty string, which would render a lockup with a blank second line.
+ */
+export function toProductName(appName: string): string {
+  const stripped = appName.replace(/^Tuturuuu\s+/i, '').trim();
+  return stripped || appName;
+}

package/src/components/ui/finance/invoices/subscription-invoice.test.tsx

@@ -30,15 +30,28 @@ const testState = vi.hoisted(() => {
 
   return {
     InvoicePaymentSettings: vi.fn(),
+    SubscriptionAttendanceSummary: vi.fn(),
     categories: [] as Array<{ id: string; name: string }>,
     groupIds: ['group-1'],
     month: '2026-07',
+    setMonth: vi.fn(),
     productSelectionInjected: false,
     products: [product],
     selectedProducts: [{ inventory, product, quantity: 1 }],
     useCategories: vi.fn(),
     useWallets: vi.fn(),
     userId: 'user-1',
+    userGroups: [
+      {
+        workspace_user_groups: {
+          ending_date: null as string | null,
+          id: 'group-1',
+          name: 'Group 1',
+          sessions: ['2026-07-05'],
+          starting_date: '2026-07-01',
+        },
+      },
+    ],
     wallets: [] as Array<{
       currency: string;
       id: string;
@@ -67,7 +80,7 @@ vi.mock('nuqs', () => ({
   useQueryState: (key: string, options?: { defaultValue?: unknown }) => {
     if (key === 'user_id') return [testState.userId, vi.fn()];
     if (key === 'group_ids') return [testState.groupIds, vi.fn()];
-    if (key === 'month') return [testState.month, vi.fn()];
+    if (key === 'month') return [testState.month, testState.setMonth];
     return [options?.defaultValue ?? '', vi.fn()];
   },
 }));
@@ -113,7 +126,10 @@ vi.mock('./components/invoice-products-permission-warning', () => ({
 }));
 
 vi.mock('./components/subscription-attendance-summary', () => ({
-  SubscriptionAttendanceSummary: () => null,
+  SubscriptionAttendanceSummary: (props: unknown) => {
+    testState.SubscriptionAttendanceSummary(props);
+    return null;
+  },
 }));
 
 vi.mock('./components/subscription-group-selector', () => ({
@@ -178,17 +194,7 @@ vi.mock('./hooks', () => ({
     isLoading: false,
   }),
   useUserGroups: () => ({
-    data: [
-      {
-        workspace_user_groups: {
-          ending_date: null,
-          id: 'group-1',
-          name: 'Group 1',
-          sessions: ['2026-07-05'],
-          starting_date: '2026-07-01',
-        },
-      },
-    ],
+    data: testState.userGroups,
     isLoading: false,
   }),
   useUserLinkedPromotions: () => ({ data: [] }),
@@ -262,9 +268,14 @@ function renderSubscriptionInvoice(
 describe('SubscriptionInvoice checkout defaults', () => {
   beforeEach(() => {
     testState.InvoicePaymentSettings.mockClear();
+    testState.SubscriptionAttendanceSummary.mockClear();
     testState.useCategories.mockClear();
     testState.useWallets.mockClear();
     testState.productSelectionInjected = false;
+    testState.month = '2026-07';
+    testState.setMonth.mockClear();
+    testState.userGroups[0]!.workspace_user_groups.ending_date = null;
+    testState.userGroups[0]!.workspace_user_groups.sessions = ['2026-07-05'];
     testState.products[0]!.finance_category_id = null;
     testState.wallets = [];
     testState.categories = [];
@@ -328,4 +339,29 @@ describe('SubscriptionInvoice checkout defaults', () => {
       )
     );
   });
+
+  it('keeps an advance month selected after the group schedule end', async () => {
+    testState.month = '2026-09';
+    testState.userGroups[0]!.workspace_user_groups.ending_date = '2026-08-31';
+    testState.userGroups[0]!.workspace_user_groups.sessions = [
+      '2026-07-05',
+      '2026-08-05',
+      '2026-09-05',
+    ];
+
+    renderSubscriptionInvoice();
+
+    await waitFor(() =>
+      expect(testState.SubscriptionAttendanceSummary).toHaveBeenCalledWith(
+        expect.objectContaining({
+          availableMonths: expect.arrayContaining([
+            expect.objectContaining({ value: '2026-09' }),
+          ]),
+          selectedMonth: '2026-09',
+        })
+      )
+    );
+    expect(testState.setMonth).not.toHaveBeenCalledWith('2026-07');
+    expect(testState.setMonth).not.toHaveBeenCalledWith('2026-08');
+  });
 });

package/src/components/ui/finance/invoices/subscription-invoice.tsx

@@ -728,30 +728,22 @@ export function SubscriptionInvoice({
     }
     lastMonthSyncRef.current = null;
 
-    const { earliestStart, latestEnd } = getGroupsDateRange(
-      userGroups,
-      selectedGroupIds
-    );
+    const { earliestStart } = getGroupsDateRange(userGroups, selectedGroupIds);
 
-    if (!earliestStart || !latestEnd) return;
+    if (!earliestStart) return;
 
     const currentMonth = getMonthStartDate(selectedMonth);
     if (Number.isNaN(currentMonth.getTime())) return;
 
     const earliestMonthStart = getMonthStartDate(earliestStart);
-    const latestMonthStart = getMonthStartDate(latestEnd);
 
-    if (currentMonth < earliestMonthStart || currentMonth > latestMonthStart) {
+    if (currentMonth < earliestMonthStart) {
       // Only correct once per groups-selection to avoid update loops
       if (lastValidatedKeyRef.current === monthValidationKey) return;
       lastValidatedKeyRef.current = monthValidationKey;
 
       const now = getCurrentBillingDate(workspaceTimezone);
-      let defaultMonth: Date;
-
-      if (now >= earliestStart && now <= latestEnd) defaultMonth = now;
-      else if (now > latestEnd) defaultMonth = latestEnd;
-      else defaultMonth = earliestStart;
+      const defaultMonth = now >= earliestStart ? now : earliestStart;
 
       const nextMonth = formatMonthValue(defaultMonth);
       if (nextMonth !== selectedMonth) {

package/src/components/ui/finance/invoices/utils.test.ts

@@ -233,7 +233,7 @@ describe('subscription invoice coverage', () => {
     ).toBe(true);
   });
 
-  it('generates prepaid future month options capped by group ending dates', () => {
+  it('keeps future billing months available after a group ending date', () => {
     const groups = [
       {
         workspace_user_groups: {
@@ -247,10 +247,11 @@ describe('subscription invoice coverage', () => {
     ] satisfies UserGroup[];
 
     expect(
-      getAvailableMonths(groups, [groupId], [], 'en-US', '2026-06', 12).map(
-        (month) => month.value
-      )
-    ).toEqual(['2026-06', '2026-07', '2026-08']);
+      getAvailableMonths(groups, [groupId], [], 'en-US', '2026-06', 3, {
+        now: new Date(2026, 5, 15),
+        workspaceTimezone: 'UTC',
+      }).map((month) => month.value)
+    ).toEqual(['2026-06', '2026-07', '2026-08', '2026-09']);
   });
 
   it('skips paid months and uses scheduled sessions for future prepaid quantities', () => {

package/src/components/ui/finance/invoices/utils.ts

@@ -524,7 +524,9 @@ export const getAvailableMonths = (
       ? getMonthStartDate(selectedMonthFallback)
       : currentMonthStart;
   const resolvedRangeEnd =
-    futureMonthHorizon > 0 && !latestEnd ? futureHorizonEnd : resolvedLatestEnd;
+    futureMonthHorizon > 0 && futureHorizonEnd > resolvedLatestEnd
+      ? futureHorizonEnd
+      : resolvedLatestEnd;
 
   const months: AvailableMonthOption[] = [];
   const currentDate = new Date(earliestStart);

package/src/components/ui/finance/transactions/columns.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import type { ColumnDef } from '@tuturuuu/ui/custom/tables/data-table';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { transactionColumns } from './columns';
 
 vi.mock('next-intl', () => ({
@@ -82,6 +83,10 @@ describe('transactionColumns', () => {
       'finance-confidential-mode=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;Secure';
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('masks the amount column when finance numbers are globally hidden', () => {
     render(<TransactionAmountCell amount={123} />);
 
@@ -116,4 +121,23 @@ describe('transactionColumns', () => {
     expect(screen.getByText('Cash')).toBeVisible();
     expect(screen.getByText('Food & Beverage')).toBeVisible();
   });
+
+  it('keeps server-rendered transaction dates stable as time advances', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime('2026-08-31T00:59:00.000Z');
+
+    const transaction = {
+      taken_at: '2026-08-31T00:00:00.000Z',
+    };
+    const firstRender = renderToString(
+      <TransactionColumnCell accessorKey="taken_at" original={transaction} />
+    );
+
+    vi.setSystemTime('2026-08-31T02:01:00.000Z');
+    const laterRender = renderToString(
+      <TransactionColumnCell accessorKey="taken_at" original={transaction} />
+    );
+
+    expect(laterRender).toBe(firstRender);
+  });
 });

package/src/components/ui/finance/transactions/columns.tsx

@@ -12,6 +12,7 @@ import { formatCurrency } from '@tuturuuu/utils/format';
 import moment from 'moment';
 import 'moment/locale/vi';
 import { useLocale } from 'next-intl';
+import { useSyncExternalStore } from 'react';
 import { DataTableColumnHeader } from '../../custom/tables/data-table-column-header';
 import {
   FINANCE_HIDDEN_AMOUNT,
@@ -27,6 +28,44 @@ interface TransactionExtraData {
   isPersonalWorkspace?: boolean;
 }
 
+const subscribeToHydration = () => () => undefined;
+const getHydratedSnapshot = () => true;
+const getServerSnapshot = () => false;
+
+function TransactionDateCell({
+  includeTime = false,
+  locale,
+  value,
+}: {
+  includeTime?: boolean;
+  locale: string;
+  value: unknown;
+}) {
+  const isHydrated = useSyncExternalStore(
+    subscribeToHydration,
+    getHydratedSnapshot,
+    getServerSnapshot
+  );
+
+  if (!value) return <div className="min-w-32">-</div>;
+
+  const localDate = moment(value);
+  if (!localDate.isValid()) return <div className="min-w-32">-</div>;
+
+  const format = includeTime ? 'DD/MM/YYYY, HH:mm:ss' : 'DD/MM/YYYY';
+  const absoluteDate = isHydrated
+    ? localDate.locale(locale).format(format)
+    : moment.utc(value).locale(locale).format(format);
+
+  return (
+    <div className="min-w-32">
+      {isHydrated && !includeTime
+        ? `${localDate.locale(locale).fromNow()}, ${absoluteDate}`
+        : absoluteDate}
+    </div>
+  );
+}
+
 function TransactionAmountCell({
   amount,
   currency,
@@ -265,15 +304,7 @@ export const transactionColumns = ({
         />
       ),
       cell: ({ row }) => (
-        <div className="min-w-32">
-          {row.getValue('taken_at')
-            ? `${moment(row.getValue('taken_at')).locale(locale).fromNow()}, ${moment(
-                row.getValue('taken_at')
-              )
-                .locale(locale)
-                .format('DD/MM/YYYY')}`
-            : '-'}
-        </div>
+        <TransactionDateCell locale={locale} value={row.getValue('taken_at')} />
       ),
     },
     {
@@ -286,13 +317,11 @@ export const transactionColumns = ({
         />
       ),
       cell: ({ row }) => (
-        <div className="min-w-32">
-          {row.getValue('created_at')
-            ? moment(row.getValue('created_at'))
-                .locale(locale)
-                .format('DD/MM/YYYY, HH:mm:ss')
-            : '-'}
-        </div>
+        <TransactionDateCell
+          includeTime
+          locale={locale}
+          value={row.getValue('created_at')}
+        />
       ),
     },
     {

package/src/components/ui/marketing/marketing-footer.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@tuturuuu/utils/format';
 import type { ReactNode } from 'react';
-import { TuturuuLogo } from '../custom/tuturuuu-logo';
+import { TuturuuuWordmark, toProductName } from '../custom/tuturuuu-wordmark';
 
 export interface MarketingFooterLink {
   href: string;
@@ -16,6 +16,8 @@ export interface MarketingFooterColumn {
 
 interface MarketingFooterProps {
   appName: string;
+  /** Product line of the lockup; defaults to `appName` minus "Tuturuuu ". */
+  productName?: string;
   /** One-line positioning statement under the wordmark. */
   tagline: string;
   columns: MarketingFooterColumn[];
@@ -29,6 +31,7 @@ interface MarketingFooterProps {
 /** Shared satellite marketing footer: wordmark column plus link columns. */
 export function MarketingFooter({
   appName,
+  productName,
   tagline,
   columns,
   legal,
@@ -44,12 +47,10 @@ export function MarketingFooter({
     >
       <div className="mx-auto grid w-full max-w-6xl gap-12 lg:grid-cols-[1.5fr_repeat(3,1fr)]">
         <div className="max-w-sm">
-          <div className="flex items-center gap-2.5">
-            <TuturuuLogo className="h-7 w-7" height={28} width={28} />
-            <span className="font-display font-semibold text-[0.95rem] tracking-[-0.01em]">
-              {appName}
-            </span>
-          </div>
+          <TuturuuuWordmark
+            product={productName ?? toProductName(appName)}
+            size="sm"
+          />
           <p className="mt-4 text-foreground/50 text-sm leading-relaxed">
             {tagline}
           </p>

package/src/components/ui/marketing/marketing-nav.tsx

@@ -3,7 +3,7 @@
 import { Menu, X } from '@tuturuuu/icons';
 import { cn } from '@tuturuuu/utils/format';
 import { type ReactNode, useEffect, useState } from 'react';
-import { TuturuuLogo } from '../custom/tuturuuu-logo';
+import { TuturuuuWordmark, toProductName } from '../custom/tuturuuu-wordmark';
 
 export interface MarketingNavLink {
   /** In-page anchor (`#pricing`) or absolute URL. */
@@ -12,8 +12,17 @@ export interface MarketingNavLink {
 }
 
 interface MarketingNavProps {
-  /** App name shown next to the logo, e.g. "Forms". */
+  /**
+   * The full app name, e.g. "Tuturuuu Forms". Used for the accessible landmark
+   * label, and as the fallback source for `productName`.
+   */
   appName: string;
+  /**
+   * The product line of the lockup — "Forms", not "Tuturuuu Forms". Defaults
+   * to `appName` with a leading "Tuturuuu " stripped, so callers that already
+   * pass the full name keep working.
+   */
+  productName?: string;
   /** Where the wordmark links back to. Defaults to the landing root. */
   homeHref?: string;
   links: MarketingNavLink[];
@@ -38,6 +47,7 @@ interface MarketingNavProps {
  */
 export function MarketingNav({
   appName,
+  productName,
   homeHref = '/',
   links,
   action,
@@ -79,13 +89,13 @@ export function MarketingNav({
         className="mx-auto flex h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8"
       >
         <a
-          className="flex shrink-0 items-center gap-2.5 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="flex shrink-0 items-center rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           href={homeHref}
         >
-          <TuturuuLogo className="h-7 w-7" height={28} width={28} />
-          <span className="font-display font-semibold text-[0.95rem] tracking-[-0.01em]">
-            {appName}
-          </span>
+          <TuturuuuWordmark
+            product={productName ?? toProductName(appName)}
+            size="sm"
+          />
         </a>
 
         <div className="hidden items-center gap-1 md:flex">

package/src/components/ui/text-editor/task-item-checkbox-view.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TaskItemCheckboxContent } from './task-item-checkbox-view';
+
+vi.mock('@tuturuuu/supabase/next/client', () => ({
+  createClient: vi.fn(),
+}));
+
+vi.mock('./task-item-checkbox', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('./task-item-checkbox')>();
+
+  return {
+    ...actual,
+    useMentionedTaskStatuses: () => ({ data: [] }),
+  };
+});
+
+function createNodeViewProps() {
+  const setNodeMarkup = vi.fn();
+  const command = vi.fn(
+    (
+      callback: (props: {
+        tr: { setNodeMarkup: typeof setNodeMarkup };
+      }) => boolean
+    ) => callback({ tr: { setNodeMarkup } })
+  );
+
+  const props = {
+    node: {
+      attrs: { checked: false },
+      descendants: vi.fn(),
+    },
+    getPos: () => 4,
+    editor: {
+      isEditable: true,
+      commands: { command },
+    },
+  } as unknown as NodeViewProps;
+
+  return { command, props, setNodeMarkup };
+}
+
+describe('TaskItemCheckboxContent', () => {
+  it('cycles pointer interactions before the editor can replace the node view', () => {
+    const { props, setNodeMarkup } = createNodeViewProps();
+    render(<TaskItemCheckboxContent {...props} />);
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: 'Task item status',
+    });
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+
+    fireEvent.pointerDown(checkbox, { button: 0, isPrimary: true });
+
+    expect(setNodeMarkup).toHaveBeenLastCalledWith(4, undefined, {
+      checked: 'indeterminate',
+    });
+    expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
+  });
+
+  it('cycles all three states from the keyboard', () => {
+    const { props, setNodeMarkup } = createNodeViewProps();
+    render(<TaskItemCheckboxContent {...props} />);
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: 'Task item status',
+    });
+
+    fireEvent.keyDown(checkbox, { key: ' ' });
+    fireEvent.keyDown(checkbox, { key: 'Enter' });
+    fireEvent.keyDown(checkbox, { key: ' ' });
+
+    expect(setNodeMarkup).toHaveBeenNthCalledWith(1, 4, undefined, {
+      checked: 'indeterminate',
+    });
+    expect(setNodeMarkup).toHaveBeenNthCalledWith(2, 4, undefined, {
+      checked: true,
+    });
+    expect(setNodeMarkup).toHaveBeenNthCalledWith(3, 4, undefined, {
+      checked: false,
+    });
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+  });
+});

package/src/components/ui/text-editor/task-item-checkbox-view.tsx

@@ -68,14 +68,24 @@ export function TaskItemCheckboxContent({
     });
   }, [editor, getPos, node.attrs, checkboxState]);
 
-  const handleCheckboxClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
+  const handleCheckboxPointerDown = useCallback(
+    (event: React.PointerEvent<HTMLButtonElement>) => {
+      if (!event.isPrimary || event.button !== 0) return;
       event.preventDefault();
       event.stopPropagation();
-      if (!editor.isEditable) return;
       handleCheckboxCycle();
     },
-    [editor, handleCheckboxCycle]
+    [handleCheckboxCycle]
+  );
+
+  const handleCheckboxKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      event.stopPropagation();
+      handleCheckboxCycle();
+    },
+    [handleCheckboxCycle]
   );
 
   return (
@@ -84,29 +94,29 @@ export function TaskItemCheckboxContent({
         className="task-list-checkbox-label flex shrink-0 select-none pt-2.5"
         contentEditable={false}
       >
+        {/* biome-ignore lint/a11y/useSemanticElements: a button avoids native checkbox state changes while ProseMirror owns the tri-state document update */}
         <button
           type="button"
-          aria-label={
-            isChecked
-              ? 'Checked'
-              : isIndeterminate
-                ? 'Indeterminate'
-                : 'Unchecked'
-          }
+          role="checkbox"
+          aria-label="Task item status"
+          aria-checked={isIndeterminate ? 'mixed' : isChecked}
           aria-disabled={!editor.isEditable}
-          onClick={handleCheckboxClick}
+          onPointerDown={handleCheckboxPointerDown}
+          onKeyDown={handleCheckboxKeyDown}
           className={cn(
-            'task-list-checkbox flex h-4.5 w-4.5 items-center justify-center',
-            'cursor-pointer rounded-lg border-2 bg-background',
-            'transition-all duration-150',
+            'task-list-checkbox flex size-5 items-center justify-center',
+            'cursor-pointer rounded-md border-2 bg-background',
+            'transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-95',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:ring-offset-2',
+            !editor.isEditable && 'cursor-default opacity-70',
             !completedTaskColor && [
               'border-input',
               'hover:scale-105 hover:border-dynamic-gray hover:bg-dynamic-gray/10',
-              'focus:border-dynamic-gray focus:outline-none focus:ring-2 focus:ring-dynamic-gray/30 focus:ring-offset-2',
+              'focus-visible:border-dynamic-gray',
               isChecked &&
-                'border-dynamic-green bg-dynamic-green/20 hover:border-dynamic-green hover:bg-dynamic-green/10 focus:border-dynamic-green focus:ring-dynamic-green/30',
+                'border-dynamic-green bg-dynamic-green/20 hover:border-dynamic-green hover:bg-dynamic-green/10 focus-visible:border-dynamic-green focus-visible:ring-dynamic-green/30',
               isIndeterminate &&
-                'border-dynamic-orange bg-dynamic-orange/20 hover:border-dynamic-orange hover:bg-dynamic-orange/10 focus:border-dynamic-orange focus:ring-dynamic-orange/30',
+                'border-dynamic-orange bg-dynamic-orange/20 hover:border-dynamic-orange hover:bg-dynamic-orange/10 focus-visible:border-dynamic-orange focus-visible:ring-dynamic-orange/30',
             ],
             completedTaskColor === 'red' && [
               'border-dynamic-red/50',