@vvedantb/ui 0.39.1 → 0.40.0

package/README.md

@@ -4,7 +4,7 @@ Shared React 19 web UI. Source-exported: no build step.
 
 | Import | What it is |
 | --- | --- |
-| `@vvedantb/ui` | The main JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `SidebarUpgradeCard`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), date pickers from 0.14.0 (`Calendar`, `DatePicker`, `DateTimePicker`, `MonthPicker`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
+| `@vvedantb/ui` | The main JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `SidebarUpgradeCard`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`; `ProductHero` and `PROJECT_V_HOME_URL` in the next release), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), date pickers from 0.14.0 (`Calendar`, `DatePicker`, `DateTimePicker`, `MonthPicker`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
 | `@vvedantb/ui/client` | The root without `@vvedantb/server`, convex or Clerk, for Chrome extensions (0.28.0). Leaves out the artifact viewers, `ConvexClerkProvider`, `useStableAuth`, `createUseStableAuth`, `resetStableAuthSession` and `useEnsureUser`. See [Chrome extensions](#chrome-extensions-0280). |
 | `@vvedantb/ui/brand` | App icons (`Icon*`, `APP_ICONS`), `AppWordmark`, deprecated `AppMark`, raw SVG strings and `FAMILY_APPS`. Also in the root and `/client`. |
 | `@vvedantb/ui/logos` | Third-party brand logos (`GitHubIcon`, `GoogleDriveIcon`, `SlackIcon`, `ClaudeIcon`, `VercelIcon`, ...) and `LogoProps` (0.36.0). Also in the root and `/client`. See [Third-party logos](#third-party-logos-0360). |
@@ -954,6 +954,57 @@ links under a separator. Set `app` for the Project V footer (0.37.0):
 
 **Deprecated (no `app`):** `brand`, `socials`, `name` and `legalLinks` are required, and the footer renders as before: the brand sits in the Michroma wrapper, with no product-of line and no Apps column. `actions`, `includeAppsColumn` and `showProductOf` do nothing. Set `app` instead.
 
+### `ProductHero`
+
+One hero for every product landing page: copy first, then a concept visual on mobile, side by side from `lg`.
+It sits in `landingShellClass` width. The title is the only `h1` and uses the `PageTitle` contract
+(`pageTitleClass`: Instrument Sans, weight 600, `leading-tight`, `tracking-tight`) at `text-4xl sm:text-5xl lg:text-6xl`.
+Actions are pill `Button`s. The only motion `ProductHero` adds is the `userCount` dot pulse, which stops under `prefers-reduced-motion: reduce`.
+
+```tsx
+<ProductHero
+  title="Make a bot. Keep the chat going."
+  tagline="Each bot has its own ongoing chat and its own memory. vibot is your default bot. It sends each message to the bot that should answer."
+  primaryCta={{ label: "Try vibot free", href: "/sign-up" }}
+  signIn={{ href: "/sign-in" }}
+  visual={<OrbitRings />}
+  visualLabel="Rings orbiting a bot"
+  userCount={userCount} // undefined while loading
+/>
+```
+
+Velth has no Sign in, so it sets no `signIn`:
+
+```tsx
+const V_STORE_DOWNLOAD_URL = "https://projectv.uk/download/v-store";
+
+<ProductHero
+  title="Your health, your control"
+  tagline="..."
+  primaryCta={{ label: "Try the demo", href: "#demo" }}
+  secondaryCta={{ label: "Download on V Store", href: V_STORE_DOWNLOAD_URL, rel: "nofollow" }}
+  visual={<OrbitRings />}
+/>
+```
+
+#### Feeding `userCount`
+
+The package does no fetching. The app calls a Convex action that wraps the Clerk backend SDK `clerk.users.getCount()` (it needs `CLERK_SECRET_KEY` on the server), once on mount or cached server-side. Pass `undefined` while loading and the positive number when it resolves. The row stays hidden for `undefined`, `null` and values of 0 or less, so a loading `0` never flashes "0+ people".
+
+| Prop | |
+| --- | --- |
+| `title`, `tagline` | Nodes. |
+| `primaryCta` | `{ label, href?, rel?, target?, onClick?, variant? }`. With `href` it renders a plain `a` (no framework link), and `rel` and `target` pass through to it. Otherwise it renders a `button`. Variant default `"default"`. |
+| `secondaryCta` | Same shape. Optional. Variant default `"outline"`. |
+| `signIn` | `{ href?, onClick? }`. Renders exactly one "Sign in" control (`secondary` variant). Omit it for none. Do not also put a Sign in in the page nav. |
+| `visual` | Node. An animated concept visual in the style of https://projectv.uk (ring, orbit, particles). **Not** an app replica or screenshot. If it animates, it must respect `prefers-reduced-motion`. |
+| `visualLabel` | Gives the visual region `role="img"` and this name. Without it the region is `aria-hidden`. |
+| `userCount` | Optional number. Shows "Free to use · {n}+ people already here" under the actions, with a green dot that pulses unless `prefers-reduced-motion: reduce`. `n` is formatted (`1284` is "1,284"). Hidden when `undefined`, `null` or 0 or less. See [Feeding `userCount`](#feeding-usercount). |
+| `showProductOf` | Default `true`: "a product of Project V" linking to `PROJECT_V_HOME_URL` (`https://projectv.uk`, new tab). The link target is fixed: no prop changes it. `false` hides the whole line. The text names no app, unlike `SiteFooter`. |
+| `className` | Added to the section. |
+
+`SiteFooter` uses the same `PROJECT_V_HOME_URL`. A runnable playground is in `examples/product-hero/`.
+
 ### `PageTitle` and `PageHeader`
 
 `PageTitle` is an `h1` with `text-xl font-semibold leading-tight tracking-tight` (`pageTitleClass`): Instrument Sans, 20px, weight 600, never lighter. `PageHeader` is a title row: `title` in a `PageTitle`, an optional `action` slot, and no safe-area padding.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), third-party brand logos (also @vvedantb/ui/logos), motion-driven animated SVG icons (@vvedantb/ui/icons/animated), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",

package/src/ai-elements/activity-tasks.tsx

@@ -109,14 +109,21 @@ const MAX_VISIBLE_ROWS = 8;
 /** Max nested child rows shown under a subtask before "+N more". */
 const MAX_VISIBLE_CHILDREN = 8;
 
-const HIDDEN_TYPES = new Set<ActivityStep["type"]>(["thinking", "response"]);
+/**
+ * Both layouts show mid-turn reply text in the timeline, in the order it was
+ * written, so a live turn never stacks its first words below newer steps.
+ */
+const HIDDEN_TYPES = new Set<ActivityStep["type"]>(["thinking"]);
 
-/** Inline layout shows mid-turn reply text in the timeline; thinking stays hidden. */
-const INLINE_HIDDEN_TYPES = new Set<ActivityStep["type"]>(["thinking"]);
+/** A subagent's own text belongs to its child thread view, not under its row. */
+const HIDDEN_CHILD_TYPES = new Set<ActivityStep["type"]>([
+  "thinking",
+  "response",
+]);
 
 /**
- * `folded` (Codex-style): a settled turn collapses behind "Worked for …",
- * long timelines cap behind "Show N more", and mid-turn text is hidden.
+ * `folded` (Codex-style): a settled turn collapses behind "Worked for …" and
+ * long timelines cap behind "Show N more".
  * `inline` (Claude-style): every step and the text between them stay open.
  */
 export type ActivityLayout = "folded" | "inline";
@@ -396,10 +403,8 @@ function ActivityStepRow({
   if (step.type === "reasoning") return <ActivityReasoningLine step={step} />;
 
   const Icon = iconForStep(step);
-  // A subagent's own text (`response` children) belongs to its child thread
-  // view, not the parent's timeline.
   const childRows = (children ?? []).filter(
-    (child) => !HIDDEN_TYPES.has(child.step.type),
+    (child) => !HIDDEN_CHILD_TYPES.has(child.step.type),
   );
   const openSubagent =
     step.type === "subtask" ? (
@@ -693,10 +698,9 @@ export const ActivityTasks = memo(
   }: ActivityTasksProps) => {
     const merge = useCn();
     const inline = layout === "inline";
-    const hiddenTypes = inline ? INLINE_HIDDEN_TYPES : HIDDEN_TYPES;
     const rows = buildActivityRows(steps).filter(
       (row) =>
-        !hiddenTypes.has(row.step.type) &&
+        !HIDDEN_TYPES.has(row.step.type) &&
         // A subagent's text whose Agent row is missing still belongs to its
         // child thread, never to the parent's inline reply.
         !(row.step.type === "response" && row.step.parentToolUseId),

package/src/client.ts

@@ -326,6 +326,9 @@ export type {
   SiteFooterProps,
   SiteFooterSocial,
 } from "./marketing/SiteFooter";
+export { ProductHero } from "./marketing/ProductHero";
+export type { ProductHeroAction, ProductHeroProps } from "./marketing/ProductHero";
+export { PROJECT_V_HOME_URL } from "./marketing/projectV";
 export { PricingModal, V_PRO_APP_BENEFITS } from "./marketing/PricingModal";
 export type {
   PricingModalLegacyProps,

package/src/index.ts

@@ -326,6 +326,9 @@ export type {
   SiteFooterProps,
   SiteFooterSocial,
 } from "./marketing/SiteFooter";
+export { ProductHero } from "./marketing/ProductHero";
+export type { ProductHeroAction, ProductHeroProps } from "./marketing/ProductHero";
+export { PROJECT_V_HOME_URL } from "./marketing/projectV";
 export { PricingModal, V_PRO_APP_BENEFITS } from "./marketing/PricingModal";
 export type {
   PricingModalLegacyProps,

package/src/marketing/ProductHero.tsx

@@ -0,0 +1,129 @@
+import type { ComponentProps, MouseEventHandler, ReactNode } from "react";
+import { Button } from "../ui/button";
+import { pageTitleClass } from "../ui/page-title";
+import { useMediaQuery } from "../hooks/use-media-query";
+import { cn } from "../utils/cn";
+import { landingShellClass, productHeroSocialProofClass } from "./marketing-classes";
+import { PROJECT_V_HOME_URL } from "./projectV";
+
+export type ProductHeroAction = {
+  label: string;
+  /** Renders an `a`. Without it the action renders a `button`. */
+  href?: string;
+  /** Passed to the `a`. Only used with `href`. */
+  rel?: string;
+  /** Passed to the `a`. Only used with `href`. */
+  target?: string;
+  onClick?: MouseEventHandler;
+  /** Default: `"default"` for the primary action and `"outline"` for the secondary action. */
+  variant?: ComponentProps<typeof Button>["variant"];
+};
+
+export type ProductHeroProps = {
+  /** The only `h1` of the hero. Instrument Sans, weight 600, `leading-tight`, `tracking-tight` (`pageTitleClass`), at a display scale. */
+  title: ReactNode;
+  /** Short product description under the title. */
+  tagline: ReactNode;
+  primaryCta: ProductHeroAction;
+  secondaryCta?: ProductHeroAction;
+  /**
+   * Renders exactly one "Sign in" control. Omit it for none. The hero never renders two,
+   * so leave the page nav without its own Sign in. Set `href` or `onClick`.
+   */
+  signIn?: { href?: string; onClick?: MouseEventHandler };
+  /**
+   * An animated concept visual in the style of https://projectv.uk: a glowing ring, orbit
+   * or particle field that conveys the idea of the product.
+   *
+   * It must NOT be an app replica, a screenshot or a mock of the product UI. Those age as
+   * the app changes and are the drift this component removes.
+   *
+   * If the visual animates, it must respect `prefers-reduced-motion` itself.
+   */
+  visual: ReactNode;
+  /** Gives the visual region `role="img"` and this accessible name. Without it the region is decorative (`aria-hidden`). */
+  visualLabel?: string;
+  /**
+   * Live user count for social proof under the actions: "Free to use · 1,284+ people already here",
+   * with a pulsing green dot (static under `prefers-reduced-motion: reduce`).
+   *
+   * The package does no fetching. The app calls a Convex action that wraps the Clerk backend SDK
+   * `clerk.users.getCount()` (needs `CLERK_SECRET_KEY`), once on mount or cached server-side.
+   * Pass `undefined` while loading and the positive number once it resolves. The row stays hidden
+   * for `undefined`, `null` and any value of 0 or less, so a loading `0` never shows "0+ people".
+   */
+  userCount?: number | null;
+  /** Default `true`. Renders "a product of Project V", always linked to `PROJECT_V_HOME_URL`. The link target cannot be changed; `false` hides the whole line. */
+  showProductOf?: boolean;
+  className?: string;
+};
+
+// Same family, weight, leading and tracking as `PageTitle`; only the size changes with the viewport.
+// Joined as plain strings: `cn` would drop `leading-tight` because a `text-*` size class conflicts with it.
+const titleClass = `text-balance text-4xl sm:text-5xl lg:text-6xl ${pageTitleClass.replace(/\btext-xl\s*/, "")}`;
+
+function UserCountProof({ count }: { count: number }) {
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  return (
+    <p className={productHeroSocialProofClass} data-testid="user-count">
+      <span data-testid="user-count-dot" aria-hidden="true" className={cn("size-2 rounded-full bg-success", !reducedMotion && "animate-pulse")} />
+      <span>Free to use · {new Intl.NumberFormat("en-GB").format(count)}+ people already here</span>
+    </p>
+  );
+}
+
+function ActionControl({ action, variant, size = "lg" }: { action: ProductHeroAction; variant: NonNullable<ProductHeroAction["variant"]>; size?: ComponentProps<typeof Button>["size"] }) {
+  const v = action.variant ?? variant;
+  if (action.href !== undefined) {
+    return (
+      <Button asChild variant={v} size={size}>
+        <a href={action.href} rel={action.rel} target={action.target} onClick={action.onClick}>
+          {action.label}
+        </a>
+      </Button>
+    );
+  }
+  return (
+    <Button type="button" variant={v} size={size} onClick={action.onClick}>
+      {action.label}
+    </Button>
+  );
+}
+
+/**
+ * Shared hero for a product landing page. Copy first, then the visual on mobile; side by
+ * side from `lg`. The title, calls to action, single Sign in and product-of line are fixed
+ * by the component so every product renders the same hero.
+ */
+export function ProductHero({ title, tagline, primaryCta, secondaryCta, signIn, visual, visualLabel, userCount, showProductOf = true, className }: ProductHeroProps) {
+  return (
+    <section className={cn(landingShellClass, "py-12 sm:py-16 lg:py-24", className)}>
+      <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
+        <div className="flex flex-col items-start text-left">
+          <h1 className={titleClass}>{title}</h1>
+          <p className="mt-4 max-w-xl text-pretty text-base leading-relaxed text-muted-foreground sm:mt-5 sm:text-lg">{tagline}</p>
+          <div className="mt-8 flex flex-wrap items-center gap-3">
+            <ActionControl action={primaryCta} variant="default" />
+            {secondaryCta ? <ActionControl action={secondaryCta} variant="outline" /> : null}
+            {signIn ? <ActionControl action={{ label: "Sign in", ...signIn }} variant="secondary" /> : null}
+          </div>
+          {userCount != null && userCount > 0 ? <UserCountProof count={userCount} /> : null}
+          {showProductOf ? (
+            <p className="mt-8 text-sm text-muted-foreground">
+              a product of{" "}
+              <a href={PROJECT_V_HOME_URL} target="_blank" rel="noopener noreferrer" className="underline underline-offset-2">
+                Project V
+              </a>
+            </p>
+          ) : null}
+        </div>
+        <div
+          className="relative flex min-h-64 items-center justify-center overflow-hidden lg:min-h-96"
+          {...(visualLabel ? { role: "img", "aria-label": visualLabel } : { "aria-hidden": true })}
+        >
+          {visual}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/SiteFooter.tsx

@@ -3,6 +3,7 @@ import { IconBrandGithub, IconBrandInstagram, IconBrandX } from "@tabler/icons-r
 import { APP_ICONS, AppWordmark, projectVAppsColumn, type AppName, type ProductAppName } from "../brand";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
+import { PROJECT_V_HOME_URL } from "./projectV";
 import { siteFooterClasses, type SiteFooterVariant } from "./marketing-classes";
 
 export type SiteFooterLink = {
@@ -178,7 +179,7 @@ export function SiteFooter(props: SiteFooterProps) {
               {showProductOf ? (
                 <p className={c.rights}>
                   {props.app} is a product of{" "}
-                  <a href="https://projectv.uk" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2">
+                  <a href={PROJECT_V_HOME_URL} target="_blank" rel="noopener noreferrer" className="underline underline-offset-2">
                     Project V
                   </a>
                   .

package/src/marketing/marketing-classes.ts

@@ -125,3 +125,6 @@ export const pricingMultiClasses = {
     switchIdle: "text-muted-foreground",
   },
 } as const;
+
+/** Social proof row under the `ProductHero` actions. */
+export const productHeroSocialProofClass = "mt-6 flex items-center gap-2 text-sm text-muted"; // check-tokens-allow: text-muted

package/src/marketing/projectV.ts

@@ -0,0 +1,2 @@
+/** Home page of Project V. Target of every "a product of Project V" link. */
+export const PROJECT_V_HOME_URL = "https://projectv.uk";