@tuturuuu/ui 0.30.0 → 0.30.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.30.0",
+  "version": "0.30.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -93,7 +93,7 @@
     "@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",
@@ -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/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">