@vvedantb/ui 0.22.0 → 0.24.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 only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `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 only 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/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. CSS. |
 | `@vvedantb/ui/tokens/tokens.css` | Same file as `@vvedantb/ui/tokens`. CSS. |
 | `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `clear-input`, `motion`, `animations`, `nav-icons`, `compat-shadcn-rgb`, `border-beam` (opt-in, for `BorderBeam`), `markdown` (opt-in, for `Markdown`). CSS. `tokens.css` imports `scrollbar-thin`, `clear-input` and `motion`. |
@@ -179,6 +179,17 @@ function MentionComposer({ draft, setDraft, send }: Props) {
 
 Fixture: `composer/examples/` (see its README). It has a `tokens.css` page and a `compat-shadcn-rgb.css` page, each with light and dark.
 
+## Sidebar upgrade card
+
+```tsx
+import { SidebarUpgradeCard } from "@vvedantb/ui";
+
+{!isPro && <SidebarUpgradeCard onUpgrade={() => setPricingOpen(true)} />}
+{!isPro && <SidebarUpgradeCard collapsed onUpgrade={() => setPricingOpen(true)} />}
+```
+
+Shows the title "Upgrade to Pro" and an "Upgrade" pill, with no mark. The title fits in full at 254px. `collapsed` renders a round button with the short text "Pro", labelled "Upgrade to Pro" for narrow rails. The card does not check the plan, so the app hides it for Pro users.
+
 ## Sessions hover card
 
 ```tsx
@@ -865,6 +876,42 @@ links under a separator.
 | `legalLinks` | `{ href, label }[]`, open in a new tab. |
 | `variant` | `"muted"` (default, `text-muted`), `"muted-foreground"`, or `"touch"` (`text-muted-foreground`, `max-sm:hit-target` links, safe-area bottom padding). |
 
+### `Icon*` app icons
+
+Tabler-style plain app glyphs: `IconVibot`, `IconVhub`, `IconVmem`, `IconVerve`,
+`IconVelth` and `IconProjectV`. No background, no padding. `APP_ICONS[app]`
+looks one up by `AppName`.
+
+```tsx
+import { IconVerve } from "@vvedantb/ui"
+
+<IconVerve size={24} color="currentColor" />
+```
+
+`size` is the height (default 24) and the width follows the glyph. `color`
+defaults to `currentColor`. `stroke` sets the stroke width in pixels for stroke
+glyphs (fill glyphs ignore it). `title` gives an accessible name. The ref goes
+to the `<svg>`.
+
+### `AppMark` (deprecated)
+
+Deprecated in favour of the `Icon*` components for plain marks. Tiles stay here.
+Family app icons: `app` (`projectv`, `vibot`, `vhub`, `vmem`, `verve`, `velth`),
+`variant`, `size`, `title`.
+
+- `variant="mark"` (default) is the plain logo in `currentColor`. It is cropped
+  tight to the glyph (stroke marks include half the stroke width) with no
+  padding. `size` is the rendered height; the width follows the glyph's aspect
+  ratio, so it sits level with a wordmark. A string `size` (for example `"2rem"`)
+  sets both width and height to that value. `APP_MARK_VIEWBOX` holds the tight
+  viewBox per app; `appMarkSvg()` and `APP_MARK_SVG` use it.
+- `variant="tile"` and `"tile-light"` keep the equalised, padded 1024 grid on a
+  rounded tile, always square. `appTileSvg`, `appAdaptiveSvg`, `appExtension128Svg`,
+  `APP_TILE_SVG`, `APP_TILE_LIGHT_SVG` and favicons are unchanged.
+
+Use tiles only where the app shows on its background (app and store icons,
+favicons). Use the plain mark wherever the logo has no background.
+
 ### `PricingModal`
 
 Upgrade dialog with two layouts. Without `plans` it is the single-plan dialog
@@ -877,7 +924,7 @@ default) and `renderCheckout`.
 
 #### Multi-plan (0.22.0)
 
-Header: `apps` (an `AppName[]`, shown as `AppMark` tiles at the top left),
+Header: `apps` (an `AppName[]`, shown as plain `Icon*` logos at the top left; each links to the app's site in a new tab and shows its display name in a tooltip, from `FAMILY_APPS`),
 `headline` (centre), a Monthly / Annual switch and a close button (top right).
 Then one card per entry of `plans` (2 to 4 fit) and one `finePrint` line. Cards
 stack on narrow screens.
@@ -890,6 +937,10 @@ price is the per-month price). `ctaLabel` defaults to "Get started". `featured`
 (or `highlighted`) adds a subtle ring. A `current` plan shows a disabled,
 outlined "Current plan" button and does not call `renderCheckout`.
 
+`appBenefits` (`{ app, items }[]`, type `PricingPlanAppBenefit`) groups benefits per app, each under a small heading with that app's icon and display name. It renders after `benefits` and scrolls inside the card when long. Set `currentApp` on the modal to put that app's group first; the other groups keep the array order. The `featured` / `highlighted` plan uses `V_PRO_APP_BENEFITS` (the approved V Pro copy, in the order vibot, vmem, vhub, velth, verve) when it omits `appBenefits`, so apps usually pass only `currentApp`. Other plans show app benefits only when set.
+
+`FAMILY_APPS` (and `familyApp(app)`), exported from the root and `@vvedantb/ui/brand`, is the single list of app display names and sites (`vibot`, `Verve`, `Velth`, `vmem`, `vhub`, `Project V`; URLs without a trailing slash). App names live only under `src/brand/`.
+
 The `featured` plan's button is a solid primary button (`Button` `variant="default"`). Other plans use `secondary`.
 
 `renderCheckout(button, plan, period)` wraps each plan's button.
@@ -912,14 +963,6 @@ Each app passes its own plan names, prices and copy. The example and the screens
       price: { month: "$15", year: "$10" },
       featured: true,
       intro: "Everything in Free, and:",
-      highlight: { title: "Shared", description: "usage across every V app" },
-      benefits: [
-        { label: "Higher limits", icon: "vibot" },
-        { label: "Pro features", icon: "verve" },
-        { label: "Pro features", icon: "velth" },
-        { label: "More memory", icon: "vmem" },
-        { label: "More storage", icon: "vhub" },
-      ],
     },
   ]}
   renderCheckout={(button, plan, period) => (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one 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), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/shell/src/SidebarUpgradeCard.tsx

@@ -0,0 +1,47 @@
+import { Button } from "../../src/ui/button";
+import { cn } from "../../src/utils/cn";
+
+export type SidebarUpgradeCardProps = {
+  /** Opens the app's `PricingModal`. */
+  onUpgrade: () => void;
+  /** Narrow rail: a round "Pro" button (labelled "Upgrade to Pro") instead of the full card. Default `false`. */
+  collapsed?: boolean;
+  className?: string;
+};
+
+const pillClass = "bg-foreground text-background hover:bg-foreground/85";
+
+/**
+ * Upgrade prompt for the sidebar: the title "Upgrade to Pro" and an "Upgrade" pill, with no mark. It does
+ * not check the plan; the app hides it when the user is already on Pro.
+ */
+export function SidebarUpgradeCard({ onUpgrade, collapsed = false, className }: SidebarUpgradeCardProps) {
+  if (collapsed) {
+    return (
+      <Button
+        type="button"
+        size="sm"
+        aria-label="Upgrade to Pro"
+        title="Upgrade to Pro"
+        onClick={onUpgrade}
+        className={cn("rounded-full px-3", pillClass, className)}
+      >
+        Pro
+      </Button>
+    );
+  }
+  return (
+    <div
+      data-slot="sidebar-upgrade-card"
+      className={cn(
+        "flex items-center justify-between gap-3 rounded-2xl bg-surface-secondary px-3 py-2.5 text-foreground",
+        className,
+      )}
+    >
+      <span className="min-w-0 truncate text-sm font-semibold">Upgrade to Pro</span>
+      <Button type="button" size="sm" onClick={onUpgrade} className={cn("shrink-0 rounded-full", pillClass)}>
+        Upgrade
+      </Button>
+    </div>
+  );
+}

package/shell/src/index.ts

@@ -1,5 +1,7 @@
 export { SidebarHeader } from "./SidebarHeader.js";
 export type { SidebarHeaderProps } from "./SidebarHeader.js";
+export { SidebarUpgradeCard } from "./SidebarUpgradeCard.js";
+export type { SidebarUpgradeCardProps } from "./SidebarUpgradeCard.js";
 export { PillTabs } from "./PillTabs.js";
 export type { PillTabItem, PillTabsProps } from "./PillTabs.js";
 export { cn } from "./cn.js";

package/src/brand/AppIcons.tsx

@@ -0,0 +1,72 @@
+import { forwardRef, useId, type ForwardRefExoticComponent, type RefAttributes, type SVGProps } from "react";
+import { APP_MARKS, APP_MARK_VIEWBOX, APP_NAMES, markAspect, markLinecap, markStrokeWidth, type AppName } from "./svg";
+
+export type AppIconProps = Omit<SVGProps<SVGSVGElement>, "children" | "height" | "width" | "viewBox" | "stroke" | "color"> & {
+  /** Rendered height. Default 24. A number gives the width from the glyph's aspect ratio; a string sets width and height to the same value. */
+  size?: number | string;
+  /** Glyph colour, for fill and stroke glyphs. Default `"currentColor"`. */
+  color?: string;
+  /** Stroke width in rendered pixels, for stroke glyphs (Tabler style, for example `1.5`). Default: the glyph's own weight. Fill glyphs ignore it. */
+  stroke?: number | string;
+  /** Accessible name. Without it the icon is `aria-hidden`. */
+  title?: string;
+};
+
+export type AppIconComponent = ForwardRefExoticComponent<AppIconProps & RefAttributes<SVGSVGElement>>;
+
+function viewBoxHeight(app: AppName): number {
+  return Number(APP_MARK_VIEWBOX[app].split(" ")[3]);
+}
+
+function createAppIcon(app: AppName, displayName: string): AppIconComponent {
+  const Icon = forwardRef<SVGSVGElement, AppIconProps>(function Icon(
+    { size = 24, color = "currentColor", stroke, title, ...rest },
+    ref,
+  ) {
+    const titleId = useId();
+    const { kind, paths } = APP_MARKS[app];
+    const width = typeof size === "number" ? Math.round(size * markAspect(app) * 100) / 100 : size;
+    const renderedHeight = typeof size === "number" ? size : 24;
+    const strokeWidth = stroke === undefined ? markStrokeWidth(app) : Number(stroke) * (viewBoxHeight(app) / renderedHeight);
+    const glyphProps =
+      kind === "fill"
+        ? { fill: color }
+        : { fill: "none", stroke: color, strokeWidth, strokeLinecap: markLinecap(app), strokeLinejoin: "round" };
+    return (
+      <svg
+        {...rest}
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={width}
+        height={size}
+        viewBox={APP_MARK_VIEWBOX[app]}
+        preserveAspectRatio="xMidYMid meet"
+        data-app={app}
+        role={title ? "img" : undefined}
+        aria-hidden={title ? undefined : true}
+        aria-labelledby={title ? titleId : undefined}
+      >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <g {...(glyphProps as SVGProps<SVGGElement>)} data-glyph={app}>
+          {paths.map((d) => (
+            <path key={d} d={d} />
+          ))}
+        </g>
+      </svg>
+    );
+  });
+  Icon.displayName = displayName;
+  return Icon;
+}
+
+const iconName = (app: AppName) => `Icon${app === "projectv" ? "ProjectV" : app[0]!.toUpperCase() + app.slice(1)}`;
+
+/** Plain app glyph components by app name, for dynamic lookup. */
+export const APP_ICONS = Object.fromEntries(APP_NAMES.map((app) => [app, createAppIcon(app, iconName(app))])) as Record<AppName, AppIconComponent>;
+
+export const IconVibot = APP_ICONS.vibot;
+export const IconVhub = APP_ICONS.vhub;
+export const IconVmem = APP_ICONS.vmem;
+export const IconVerve = APP_ICONS.verve;
+export const IconVelth = APP_ICONS.velth;
+export const IconProjectV = APP_ICONS.projectv;

package/src/brand/AppMark.tsx

@@ -1,12 +1,17 @@
 import { useId, type SVGProps } from "react";
+import { APP_ICONS } from "./AppIcons";
 import { APP_MARKS, MARK_VIEWBOX, TILE_RADIUS, markLinecap, markStrokeWidth, type AppMarkVariant, type AppName } from "./svg";
 
 export type AppMarkProps = Omit<SVGProps<SVGSVGElement>, "children" | "height" | "width" | "viewBox"> & {
   /** Which family app's mark to draw. */
   app: AppName;
-  /** `"mark"` (default): glyph in `currentColor`. `"tile"`: white glyph on a black rounded tile. `"tile-light"`: black glyph on a white tile. */
+  /** `"mark"` (default): plain logo in `currentColor`, cropped tight to the glyph with no padding. `"tile"`: white glyph on a black rounded tile. `"tile-light"`: black glyph on a white tile. */
   variant?: AppMarkVariant;
-  /** Width and height. Default 24. */
+  /**
+   * Default 24. For `"mark"` it sets the rendered height and the width follows the glyph's aspect ratio
+   * (a number gives an exact width; a string sets both to the same value and the glyph is centred).
+   * Tiles are always square, `size` by `size`.
+   */
   size?: number | string;
   /** Accessible name. Without it the mark is `aria-hidden`. */
   title?: string;
@@ -17,12 +22,19 @@ const TILE_TONES = {
   "tile-light": { bg: "#fff", fg: "#000" },
 } as const;
 
-/** One of the six family app marks on the 1024 grid. */
+/**
+ * One of the six family app marks. The plain mark is cropped tight; tiles use the padded 1024 grid.
+ * @deprecated Use the per-app `Icon*` components (or `APP_ICONS[app]`) for plain marks. Tiles are for app and store icons only.
+ */
 export function AppMark({ app, variant = "mark", size = 24, title, ...rest }: AppMarkProps) {
   const titleId = useId();
+  if (variant === "mark") {
+    const Icon = APP_ICONS[app];
+    return <Icon {...rest} size={size} title={title} data-variant="mark" />;
+  }
   const { kind, paths } = APP_MARKS[app];
-  const tone = variant === "mark" ? undefined : TILE_TONES[variant];
-  const color = tone?.fg ?? "currentColor";
+  const tone = TILE_TONES[variant];
+  const color = tone.fg;
   const glyphProps =
     kind === "fill"
       ? { fill: color }
@@ -41,6 +53,7 @@ export function AppMark({ app, variant = "mark", size = 24, title, ...rest }: Ap
       width={size}
       height={size}
       viewBox={MARK_VIEWBOX}
+      preserveAspectRatio="xMidYMid meet"
       data-app={app}
       data-variant={variant}
       role={title ? "img" : undefined}
@@ -48,7 +61,7 @@ export function AppMark({ app, variant = "mark", size = 24, title, ...rest }: Ap
       aria-labelledby={title ? titleId : undefined}
     >
       {title ? <title id={titleId}>{title}</title> : null}
-      {tone ? <rect width={1024} height={1024} rx={TILE_RADIUS} fill={tone.bg} /> : null}
+      <rect width={1024} height={1024} rx={TILE_RADIUS} fill={tone.bg} />
       {glyph}
     </svg>
   );

package/src/brand/familyApps.ts

@@ -0,0 +1,24 @@
+import type { AppName } from "./svg";
+
+export type FamilyApp = {
+  app: AppName;
+  /** Display name. */
+  name: string;
+  /** Home page of the app. */
+  url: string;
+};
+
+/** Single source for family app display names and sites, in display order. */
+export const FAMILY_APPS: readonly FamilyApp[] = [
+  { app: "vibot", name: "vibot", url: "https://vibot.projectv.uk" },
+  { app: "verve", name: "Verve", url: "https://verve.projectv.uk" },
+  { app: "velth", name: "Velth", url: "https://velth.projectv.uk" },
+  { app: "vmem", name: "vmem", url: "https://vmem.projectv.uk" },
+  { app: "vhub", name: "vhub", url: "https://vhub.projectv.uk" },
+  { app: "projectv", name: "Project V", url: "https://projectv.uk" },
+];
+
+/** Entry of `FAMILY_APPS` for an app. */
+export function familyApp(app: AppName): FamilyApp {
+  return FAMILY_APPS.find((entry) => entry.app === app)!;
+}

package/src/brand/index.ts

@@ -1,7 +1,9 @@
+export * from "./AppIcons";
 export { AppMark } from "./AppMark";
 export type { AppMarkProps } from "./AppMark";
 export {
   APP_MARKS,
+  APP_MARK_VIEWBOX,
   APP_MARK_SVG,
   APP_NAMES,
   APP_TILE_LIGHT_SVG,
@@ -10,7 +12,14 @@ export {
   appExtension128Svg,
   appMarkSvg,
   appTileSvg,
+  markAspect,
+  markBBox,
   markLinecap,
   markStrokeWidth,
+  pathBBox,
 } from "./svg";
 export type { AppMarkVariant, AppName, MarkShape } from "./svg";
+export { FAMILY_APPS, familyApp } from "./familyApps";
+export type { FamilyApp } from "./familyApps";
+export { V_PRO_APP_BENEFITS } from "./vProAppBenefits";
+export type { PricingPlanAppBenefit } from "./vProAppBenefits";

package/src/brand/svg.ts

@@ -5,7 +5,7 @@ export const APP_NAMES = ["projectv", "vibot", "vhub", "vmem", "verve", "velth"]
 
 export type AppName = (typeof APP_NAMES)[number];
 
-/** `mark`: glyph only, follows `currentColor`. `tile`: white glyph on a black tile. `tile-light`: black glyph on a white tile. */
+/** `mark`: glyph only, cropped tight, follows `currentColor`. `tile`: white glyph on a black tile. `tile-light`: black glyph on a white tile. */
 export type AppMarkVariant = "mark" | "tile" | "tile-light";
 
 export const MARK_VIEWBOX = "0 0 1024 1024";
@@ -79,6 +79,121 @@ export const APP_MARKS: Record<AppName, MarkShape> = {
   },
 };
 
+type Point = [number, number];
+type Box = [minX: number, minY: number, maxX: number, maxY: number];
+
+/** Roots in (0, 1) of the derivative of a Bezier with 1D control values `v` (quadratic or cubic). */
+function bezierExtrema(v: number[]): number[] {
+  const roots: number[] = [];
+  if (v.length === 3) {
+    const d = v[0]! - 2 * v[1]! + v[2]!;
+    if (d !== 0) roots.push((v[0]! - v[1]!) / d);
+  } else {
+    const a = -v[0]! + 3 * v[1]! - 3 * v[2]! + v[3]!;
+    const b = 2 * (v[0]! - 2 * v[1]! + v[2]!);
+    const c = v[1]! - v[0]!;
+    if (Math.abs(a) < 1e-12) {
+      if (b !== 0) roots.push(-c / b);
+    } else {
+      const disc = b * b - 4 * a * c;
+      if (disc >= 0) roots.push((-b + Math.sqrt(disc)) / (2 * a), (-b - Math.sqrt(disc)) / (2 * a));
+    }
+  }
+  return roots.filter((t) => t > 0 && t < 1);
+}
+
+function bezierAt(v: number[], t: number): number {
+  const u = 1 - t;
+  const [p0, p1, p2, p3] = v as [number, number, number, number];
+  return v.length === 3 ? u * u * p0 + 2 * u * t * p1 + t * t * p2 : u ** 3 * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t ** 3 * p3;
+}
+
+/** Extreme points of an SVG elliptical arc (endpoint form, no rotation), including both ends. */
+function arcPoints(from: Point, [rx0, ry0, , large, sweep, x, y]: [number, number, number, number, number, number, number]): Point[] {
+  const [x0, y0] = from;
+  let rx = Math.abs(rx0);
+  let ry = Math.abs(ry0);
+  const dx = (x0 - x) / 2;
+  const dy = (y0 - y) / 2;
+  const lambda = (dx * dx) / (rx * rx) + (dy * dy) / (ry * ry);
+  if (lambda > 1) {
+    rx *= Math.sqrt(lambda);
+    ry *= Math.sqrt(lambda);
+  }
+  const num = rx * rx * ry * ry - rx * rx * dy * dy - ry * ry * dx * dx;
+  const den = rx * rx * dy * dy + ry * ry * dx * dx;
+  const k = (large === sweep ? -1 : 1) * Math.sqrt(Math.max(0, num / den));
+  const cx = k * ((rx * dy) / ry) + (x0 + x) / 2;
+  const cy = k * (-(ry * dx) / rx) + (y0 + y) / 2;
+  const a0 = Math.atan2((y0 - cy) / ry, (x0 - cx) / rx);
+  let delta = Math.atan2((y - cy) / ry, (x - cx) / rx) - a0;
+  if (sweep && delta < 0) delta += 2 * Math.PI;
+  if (!sweep && delta > 0) delta -= 2 * Math.PI;
+  const points: Point[] = [from, [x, y]];
+  for (let q = -6; q <= 6; q++) {
+    const a = (q * Math.PI) / 2;
+    const t = (a - a0) / delta;
+    if (t > 0 && t < 1) points.push([cx + rx * Math.cos(a), cy + ry * Math.sin(a)]);
+  }
+  return points;
+}
+
+/** Exact bounding box of absolute `M`, `L`, `Q`, `C` and `A` path data (the only commands the marks use). Returns [minX, minY, maxX, maxY]. */
+export function pathBBox(d: string): Box {
+  const tokens = d.match(/[MLQCA]|-?\d*\.?\d+(?:e-?\d+)?/g) ?? [];
+  const points: Point[] = [];
+  let cmd = "";
+  let cur: Point = [0, 0];
+  const argc: Record<string, number> = { M: 2, L: 2, Q: 4, C: 6, A: 7 };
+  for (let i = 0; i < tokens.length; ) {
+    if (/[A-Z]/.test(tokens[i]!)) cmd = tokens[i++]!;
+    const n = argc[cmd];
+    if (!n) throw new Error(`Unsupported path command: ${cmd}`);
+    const a = tokens.slice(i, i + n).map(Number);
+    i += n;
+    const end: Point = [a[n - 2]!, a[n - 1]!];
+    if (cmd === "Q" || cmd === "C") {
+      const xs = [cur[0], ...a.filter((_, j) => j % 2 === 0)];
+      const ys = [cur[1], ...a.filter((_, j) => j % 2 === 1)];
+      for (const t of new Set([...bezierExtrema(xs), ...bezierExtrema(ys)])) points.push([bezierAt(xs, t), bezierAt(ys, t)]);
+    } else if (cmd === "A") {
+      points.push(...arcPoints(cur, a as Parameters<typeof arcPoints>[1]));
+    }
+    points.push(end);
+    cur = end;
+  }
+  return [Math.min(...points.map((p) => p[0])), Math.min(...points.map((p) => p[1])), Math.max(...points.map((p) => p[0])), Math.max(...points.map((p) => p[1]))];
+}
+
+/** Tight box of a mark: union of its paths, grown by half the stroke width for stroke marks. Returns [minX, minY, maxX, maxY]. */
+export function markBBox(app: AppName): Box {
+  const { kind, paths } = APP_MARKS[app];
+  const boxes = paths.map(pathBBox);
+  const pad = kind === "stroke" ? markStrokeWidth(app) / 2 : 0;
+  return [Math.min(...boxes.map((b) => b[0])) - pad, Math.min(...boxes.map((b) => b[1])) - pad, Math.max(...boxes.map((b) => b[2])) + pad, Math.max(...boxes.map((b) => b[3])) + pad];
+}
+
+
+/**
+ * Tight viewBox per app (`minX minY width height` on the 1024 grid): the glyph box grown by half the
+ * stroke width for stroke marks, rounded outward to whole units. Checked against `markBBox` in tests.
+ * Used by the plain logo (`variant="mark"`, `appMarkSvg`). Tiles keep `MARK_VIEWBOX`.
+ */
+export const APP_MARK_VIEWBOX: Record<AppName, string> = {
+  projectv: "172 377 686 295",
+  vibot: "295 314 494 398",
+  vhub: "186 338 582 348",
+  vmem: "255 259 513 503",
+  verve: "260 319 504 413",
+  velth: "273 276 478 482",
+};
+
+/** Width over height of a mark's tight viewBox. */
+export function markAspect(app: AppName): number {
+  const [, , w = 1, h = 1] = APP_MARK_VIEWBOX[app].split(" ").map(Number);
+  return w / h;
+}
+
 const NS = 'xmlns="http://www.w3.org/2000/svg"';
 
 /** Attributes that paint the glyph in `color`. */
@@ -90,9 +205,9 @@ function pathElements(app: AppName): string {
   return APP_MARKS[app].paths.map((d) => `<path d="${d}"/>`).join("");
 }
 
-/** Glyph only, painted with `color` (default `currentColor`). */
+/** Glyph only, cropped tight with no padding, painted with `color` (default `currentColor`). */
 export function appMarkSvg(app: AppName, color = "currentColor"): string {
-  return `<svg ${NS} viewBox="${MARK_VIEWBOX}" ${markPaintAttrs(app, color)}>${pathElements(app)}</svg>\n`;
+  return `<svg ${NS} viewBox="${APP_MARK_VIEWBOX[app]}" ${markPaintAttrs(app, color)}>${pathElements(app)}</svg>\n`;
 }
 
 /** Tile with a glyph. `radius` 0 gives a full-bleed square (apple-touch, maskable). */

package/src/brand/vProAppBenefits.ts

@@ -0,0 +1,24 @@
+import type { AppName } from "./svg";
+
+/** Benefits for one app, shown under that app's icon and name. */
+export type PricingPlanAppBenefit = {
+  app: Exclude<AppName, "projectv">;
+  items: readonly string[];
+};
+
+/** Approved per-app copy for V Pro, in display order. */
+export const V_PRO_APP_BENEFITS: readonly PricingPlanAppBenefit[] = [
+  {
+    app: "vibot",
+    items: [
+      "1000 messages / day",
+      "100 image gens / day",
+      "100 deep & 20 extreme searches / day",
+      "Smarter AI for chats, documents & sub-agents",
+    ],
+  },
+  { app: "vmem", items: ["Unlimited memories", "Higher AI search & connected-tool limits"] },
+  { app: "vhub", items: ["Unlimited scripts", "More connections, secrets & API keys"] },
+  { app: "velth", items: ["Unlimited camera scans", "Smarter AI health insights"] },
+  { app: "verve", items: ["Page version history", "Higher AI rewrite & summary limits"] },
+];

package/src/index.ts

@@ -181,6 +181,8 @@ export { toast } from "sonner";
 // use the root `cn` (clsx + tailwind-merge).
 export { SidebarHeader } from "../shell/src/SidebarHeader";
 export type { SidebarHeaderProps } from "../shell/src/SidebarHeader";
+export { SidebarUpgradeCard } from "../shell/src/SidebarUpgradeCard";
+export type { SidebarUpgradeCardProps } from "../shell/src/SidebarUpgradeCard";
 export { PillTabs } from "../shell/src/PillTabs";
 export type { PillTabItem, PillTabsProps } from "../shell/src/PillTabs";
 export { SessionsHoverCard } from "../shell/src/SessionsHoverCard";
@@ -288,20 +290,21 @@ export {
 export type { PricingModalTone, SiteFooterVariant } from "./marketing/marketing-classes";
 export { SiteFooter } from "./marketing/SiteFooter";
 export type { SiteFooterLink, SiteFooterProps, SiteFooterSocial } from "./marketing/SiteFooter";
-export { PricingModal } from "./marketing/PricingModal";
+export { PricingModal, V_PRO_APP_BENEFITS } from "./marketing/PricingModal";
 export type {
   PricingModalLegacyProps,
   PricingModalMultiProps,
   PricingModalPeriod,
   PricingModalProps,
   PricingPlan,
+  PricingPlanAppBenefit,
   PricingPlanBenefit,
 } from "./marketing/PricingModal";
 
 // App helpers: confirm skip, update watcher, settings chrome, stable auth, Convex provider, VITE env and ensure-user.
 export * from "../app/src/index";
 
-// Family app marks (AppMark and raw SVG strings for favicons).
+// Family app marks (Icon* components, deprecated AppMark and raw SVG strings for favicons).
 export * from "./brand";
 
 // Native tokens (JS values that match tokens.css).

package/src/marketing/PricingModal.tsx

@@ -1,9 +1,12 @@
 import { useRef, useState, type ReactElement, type ReactNode } from "react";
 import { IconCheck, IconX } from "@tabler/icons-react";
-import { AppMark } from "../brand/AppMark";
-import type { AppName } from "../brand/svg";
+import { APP_ICONS, IconProjectV, V_PRO_APP_BENEFITS, familyApp, type AppIconProps, type AppName, type PricingPlanAppBenefit } from "../brand";
 import { Button } from "../ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../ui/dialog";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+
+export { V_PRO_APP_BENEFITS };
+export type { PricingPlanAppBenefit };
 import { VisuallyHidden } from "../ui/visually-hidden";
 import { pricingModalClasses, pricingMultiClasses, type PricingModalTone } from "./marketing-classes";
 
@@ -75,6 +78,11 @@ export type PricingPlan = {
   /** Large title with small text under it. */
   highlight?: { title: string; description: string };
   benefits?: readonly PricingPlanBenefit[];
+  /**
+   * Grouped per app, shown after `benefits`. The `currentApp` group comes first, the rest keep the array order.
+   * The `featured` / `highlighted` plan defaults to `V_PRO_APP_BENEFITS` when this is omitted, so apps usually pass only `currentApp`. Other plans show none unless set.
+   */
+  appBenefits?: readonly PricingPlanAppBenefit[];
   /** The plan the user is on: the button reads "Current plan" and is disabled. */
   current?: boolean;
   /** Subtle ring on the card. `highlighted` is an alias. */
@@ -95,6 +103,8 @@ export type PricingModalMultiProps = {
   plans: readonly PricingPlan[];
   /** App marks at the top left. */
   apps?: readonly AppName[];
+  /** App the dialog is shown in. Its `appBenefits` group comes first. */
+  currentApp?: Exclude<AppName, "projectv">;
   /** Centred headline, for example "One plan. Every V app." */
   headline?: ReactNode;
   /** Small print under the cards. */
@@ -111,6 +121,16 @@ export type PricingModalMultiProps = {
 export type PricingModalProps = PricingModalLegacyProps | PricingModalMultiProps;
 
 /** Upgrade dialog. With `plans`: wide multi-plan layout. Without: the single-plan layout. */
+function AppIcon({ app, ...props }: AppIconProps & { app: AppName }) {
+  const Icon = APP_ICONS[app];
+  return <Icon {...props} />;
+}
+
+function sortAppBenefits(groups: readonly PricingPlanAppBenefit[], currentApp?: AppName) {
+  // Stable sort: the current app moves to the front, the rest keep their order.
+  return [...groups].sort((a, b) => Number(b.app === currentApp) - Number(a.app === currentApp));
+}
+
 export function PricingModal(props: PricingModalProps) {
   return props.plans ? <PricingModalMulti {...props} /> : <PricingModalSingle {...props} />;
 }
@@ -259,6 +279,7 @@ function PricingModalMulti({
   description,
   plans,
   apps,
+  currentApp,
   headline,
   finePrint,
   billingPeriod,
@@ -293,7 +314,27 @@ function PricingModalMulti({
 
         <div className="grid grid-cols-[1fr_auto] items-center gap-x-4 gap-y-3 px-4 pb-4 pt-5 sm:grid-cols-[1fr_auto_1fr] sm:px-6">
           <div className="flex items-center gap-2 text-foreground" data-testid="pricing-apps">
-            {apps?.map((app) => <AppMark key={app} app={app} variant="tile" size={24} className="rounded-md" />)}
+            <TooltipProvider delayDuration={200}>
+              {apps?.map((app) => {
+                const { name, url } = familyApp(app);
+                return (
+                  <Tooltip key={app}>
+                    <TooltipTrigger asChild>
+                      <a
+                        href={url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label={name}
+                        className="rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-foreground/50"
+                      >
+                        <AppIcon app={app} size={20} />
+                      </a>
+                    </TooltipTrigger>
+                    <TooltipContent portal>{name}</TooltipContent>
+                  </Tooltip>
+                );
+              })}
+            </TooltipProvider>
           </div>
           <div className="flex items-center justify-end gap-2 sm:order-last">
             <div role="group" aria-label="Billing period" className="inline-flex rounded-full bg-surface-tertiary p-0.5">
@@ -332,6 +373,7 @@ function PricingModalMulti({
         <div className={`grid grid-cols-1 gap-3 px-4 sm:px-6 ${multiColumns[count]}`}>
           {plans.map((plan) => {
             const emphasised = plan.featured ?? plan.highlighted;
+            const appBenefits = plan.appBenefits ?? (emphasised ? V_PRO_APP_BENEFITS : undefined);
             const button = (
               <Button
                 size="lg"
@@ -351,7 +393,14 @@ function PricingModalMulti({
                   emphasised ? "ring-1 ring-foreground/25" : "ring-1 ring-separator"
                 }`}
               >
-                <h3 className="text-base text-foreground">{plan.name}</h3>
+                {emphasised ? (
+                  <div className="flex items-center gap-2 text-base text-foreground">
+                    <IconProjectV size={16} className="shrink-0" />
+                    <h3>{plan.name}</h3>
+                  </div>
+                ) : (
+                  <h3 className="text-base text-foreground">{plan.name}</h3>
+                )}
                 <p className="mt-4 flex items-baseline gap-1">
                   <span className="text-5xl font-medium tabular-nums leading-none tracking-tight text-foreground">
                     {plan.price[period]}
@@ -375,9 +424,9 @@ function PricingModalMulti({
                           benefit.muted ? c.suffix : "text-foreground"
                         }`}
                       >
-                        <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center">
+                        <span className="mt-0.5 flex h-4 w-5 shrink-0 items-center justify-center">
                           {benefit.icon && benefit.icon !== "check" ? (
-                            <AppMark app={benefit.icon} size={16} />
+                            <AppIcon app={benefit.icon} size={12} className="max-w-full" />
                           ) : (
                             <IconCheck className="size-4" strokeWidth={2} />
                           )}
@@ -387,6 +436,25 @@ function PricingModalMulti({
                     ))}
                   </ul>
                 ) : null}
+                {appBenefits?.length ? (
+                  <div className="mt-4 grid gap-x-6 gap-y-2.5 border-t border-separator pt-3 sm:grid-cols-2">
+                    {sortAppBenefits(appBenefits, currentApp).map((group) => (
+                      <div key={group.app} data-app-benefits={group.app}>
+                        <p className="flex items-center gap-2 text-xs font-medium text-foreground">
+                          <AppIcon app={group.app} size={12} className="shrink-0" />
+                          {familyApp(group.app).name}
+                        </p>
+                        <ul className="mt-1 space-y-0.5 pl-5">
+                          {group.items.map((item, index) => (
+                            <li key={index} className="text-sm leading-snug text-foreground">
+                              {item}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ))}
+                  </div>
+                ) : null}
               </section>
             );
           })}