@vvedantb/ui 0.22.0 → 0.23.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 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.
+
 ## Sessions hover card
 
 ```tsx
@@ -865,6 +876,24 @@ 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`
+
+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 +906,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 `AppMark` logos, no tile, at the top left),
 `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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.22.0",
+  "version": "0.23.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,52 @@
+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`. */
+  collapsed?: boolean;
+  className?: string;
+};
+
+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.
+ */
+export function SidebarUpgradeCard({ onUpgrade, collapsed = false, className }: SidebarUpgradeCardProps) {
+  if (collapsed) {
+    return (
+      <Button
+        type="button"
+        size="icon"
+        aria-label="Upgrade to Pro"
+        title="Upgrade to Pro"
+        onClick={onUpgrade}
+        className={cn("rounded-full", pillClass, className)}
+      >
+        <AppMark app="projectv" size={16} />
+      </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,
+      )}
+    >
+      <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>
+      <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/AppMark.tsx

@@ -1,12 +1,16 @@
 import { useId, type SVGProps } from "react";
-import { APP_MARKS, MARK_VIEWBOX, TILE_RADIUS, markLinecap, markStrokeWidth, type AppMarkVariant, type AppName } from "./svg";
+import { APP_MARKS, APP_MARK_VIEWBOX, MARK_VIEWBOX, TILE_RADIUS, markAspect, 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,10 +21,12 @@ 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. */
 export function AppMark({ app, variant = "mark", size = 24, title, ...rest }: AppMarkProps) {
   const titleId = useId();
   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 glyphProps =
@@ -38,9 +44,10 @@ export function AppMark({ app, variant = "mark", size = 24, title, ...rest }: Ap
     <svg
       {...rest}
       xmlns="http://www.w3.org/2000/svg"
-      width={size}
+      width={width}
       height={size}
-      viewBox={MARK_VIEWBOX}
+      viewBox={isMark ? APP_MARK_VIEWBOX[app] : MARK_VIEWBOX}
+      preserveAspectRatio="xMidYMid meet"
       data-app={app}
       data-variant={variant}
       role={title ? "img" : undefined}

package/src/brand/index.ts

@@ -2,6 +2,7 @@ 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 +11,10 @@ export {
   appExtension128Svg,
   appMarkSvg,
   appTileSvg,
+  markAspect,
+  markBBox,
   markLinecap,
   markStrokeWidth,
+  pathBBox,
 } from "./svg";
 export type { AppMarkVariant, AppName, MarkShape } from "./svg";

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/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";

package/src/marketing/PricingModal.tsx

@@ -293,7 +293,7 @@ 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" />)}
+            {apps?.map((app) => <AppMark key={app} app={app} size={20} />)}
           </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">
@@ -351,7 +351,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">
+                    <AppMark app="projectv" 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 +382,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} />
+                            <AppMark app={benefit.icon} size={12} className="max-w-full" />
                           ) : (
                             <IconCheck className="size-4" strokeWidth={2} />
                           )}