@vvedantb/ui 0.23.0 → 0.24.0

package/README.md

@@ -188,7 +188,7 @@ import { SidebarUpgradeCard } from "@vvedantb/ui";
 {!isPro && <SidebarUpgradeCard collapsed onUpgrade={() => setPricingOpen(true)} />}
 ```
 
-Shows the Project V mark, "Upgrade to Pro" and an "Upgrade" pill. `collapsed` renders an icon-only round button labelled "Upgrade to Pro" for narrow rails. The card does not check the plan, so the app hides it for Pro users.
+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
 
@@ -876,8 +876,26 @@ 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). |
 
-### `AppMark`
+### `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`.
 
@@ -906,7 +924,7 @@ default) and `renderCheckout`.
 
 #### Multi-plan (0.22.0)
 
-Header: `apps` (an `AppName[]`, shown as plain `AppMark` logos, no tile, 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.
@@ -919,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.
@@ -941,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.23.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

@@ -1,11 +1,10 @@
-import { AppMark } from "../../src/brand/AppMark";
 import { Button } from "../../src/ui/button";
 import { cn } from "../../src/utils/cn";
 
 export type SidebarUpgradeCardProps = {
   /** Opens the app's `PricingModal`. */
   onUpgrade: () => void;
-  /** Narrow rail: an icon-only "Upgrade to Pro" button instead of the full card. Default `false`. */
+  /** Narrow rail: a round "Pro" button (labelled "Upgrade to Pro") instead of the full card. Default `false`. */
   collapsed?: boolean;
   className?: string;
 };
@@ -13,22 +12,21 @@ export type SidebarUpgradeCardProps = {
 const pillClass = "bg-foreground text-background hover:bg-foreground/85";
 
 /**
- * Upgrade prompt for the sidebar: Project V mark, "Upgrade to Pro" and an "Upgrade" pill. It does not check
- * the plan; the app hides it when the user is already on Pro. The mark uses a numeric `size` (its height) so
- * the width follows the aspect ratio.
+ * 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="icon"
+        size="sm"
         aria-label="Upgrade to Pro"
         title="Upgrade to Pro"
         onClick={onUpgrade}
-        className={cn("rounded-full", pillClass, className)}
+        className={cn("rounded-full px-3", pillClass, className)}
       >
-        <AppMark app="projectv" size={16} />
+        Pro
       </Button>
     );
   }
@@ -40,10 +38,7 @@ export function SidebarUpgradeCard({ onUpgrade, collapsed = false, className }:
         className,
       )}
     >
-      <div className="flex min-w-0 items-center gap-2 text-sm font-semibold">
-        <AppMark app="projectv" size={14} className="shrink-0" />
-        <span className="truncate">Upgrade to Pro</span>
-      </div>
+      <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>

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,5 +1,6 @@
 import { useId, type SVGProps } from "react";
-import { APP_MARKS, APP_MARK_VIEWBOX, MARK_VIEWBOX, TILE_RADIUS, markAspect, markLinecap, markStrokeWidth, type AppMarkVariant, type AppName } from "./svg";
+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. */
@@ -21,14 +22,19 @@ const TILE_TONES = {
   "tile-light": { bg: "#fff", fg: "#000" },
 } as const;
 
-/** One of the six family app marks. The plain mark is cropped tight; tiles use the padded 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 isMark = variant === "mark";
-  const width = isMark && typeof size === "number" ? Math.round(size * markAspect(app) * 100) / 100 : size;
-  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 }
@@ -44,9 +50,9 @@ export function AppMark({ app, variant = "mark", size = 24, title, ...rest }: Ap
     <svg
       {...rest}
       xmlns="http://www.w3.org/2000/svg"
-      width={width}
+      width={size}
       height={size}
-      viewBox={isMark ? APP_MARK_VIEWBOX[app] : MARK_VIEWBOX}
+      viewBox={MARK_VIEWBOX}
       preserveAspectRatio="xMidYMid meet"
       data-app={app}
       data-variant={variant}
@@ -55,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,3 +1,4 @@
+export * from "./AppIcons";
 export { AppMark } from "./AppMark";
 export type { AppMarkProps } from "./AppMark";
 export {
@@ -18,3 +19,7 @@ export {
   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/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

@@ -290,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} size={20} />)}
+            <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"
@@ -353,7 +395,7 @@ function PricingModalMulti({
               >
                 {emphasised ? (
                   <div className="flex items-center gap-2 text-base text-foreground">
-                    <AppMark app="projectv" size={16} className="shrink-0" />
+                    <IconProjectV size={16} className="shrink-0" />
                     <h3>{plan.name}</h3>
                   </div>
                 ) : (
@@ -384,7 +426,7 @@ function PricingModalMulti({
                       >
                         <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={12} className="max-w-full" />
+                            <AppIcon app={benefit.icon} size={12} className="max-w-full" />
                           ) : (
                             <IconCheck className="size-4" strokeWidth={2} />
                           )}
@@ -394,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>
             );
           })}