@vvedantb/ui 0.25.1 → 0.26.0

package/README.md

@@ -10,7 +10,7 @@ Shared React 19 web UI. Source-exported: no build step.
 | `@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`. |
 | `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | Same file as `tokens/css/compat-shadcn-rgb.css`. CSS. |
 | `@vvedantb/ui/tokens/tailwind-preset` | Tailwind preset (`.mjs`) for `@config "@vvedantb/ui/tokens/tailwind-preset"`. Kept as a build-tool entry: Tailwind needs a resolvable package path, and it is not a React API. |
-| `@vvedantb/ui/landing.css` | Landing page classes (`landing-atmosphere`, `landing-grain`, `landing-pulse-dot`, ambient graph and preview animations, smooth `#top` scrolling). CSS. |
+| `@vvedantb/ui/landing.css` | Landing page classes (`landing-wordmark-text` for `AppWordmark`, `landing-atmosphere`, `landing-grain`, `landing-pulse-dot`, ambient graph and preview animations, smooth `#top` scrolling). CSS. |
 | `@vvedantb/ui/package.json` | Package metadata. |
 
 Removed in 0.4.0-rc.1: the `/cn`, `/sonner`, `/audio`, `/shell`, `/app`, `/composer` and `/tokens/native` subpaths. Import from `@vvedantb/ui`. See [`MIGRATION.md`](MIGRATION.md).
@@ -902,6 +902,38 @@ in its equal-size square. `"start"` left-aligns the glyph's ink in the same squa
 <IconVmem size={16} align="start" />
 ```
 
+### `AppWordmark`
+
+Shared marketing wordmark for product app names across Project V sites: the `Icon*` glyph, then the full lowercase name (`vibot`, `vmem`, `verve`, `velth`, `vhub`) in Instrument Sans (`--font-sans`), weight 500, letter-spacing `-0.02em`, upright. The label is the lowercase app id, not `FAMILY_APPS[].name`. Use it in headers, the Products menu, ecosystem cards and footers.
+
+**Font rule:** app names use this sans `AppWordmark` (Instrument Sans, `--font-sans`, weight 500). Only the PROJECT V wordmark uses Michroma. No serif and no italic sans for app names.
+
+Never use `AppWordmark` for `projectv` (the type rejects it).
+
+Setup. The package does not bundle the font. `--font-sans` comes from the package tokens. Load Instrument Sans in the app, as for the rest of the UI, if it is not already loaded.
+
+```css
+@import "@vvedantb/ui/landing.css"; /* provides .landing-wordmark-text */
+```
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `app` | `"vibot" \| "vmem" \| "verve" \| "velth" \| "vhub"` | required | `ProductAppName`. |
+| `size` | `number` | `24` | Text font size in px. The icon is `Math.round(size * 0.875)` px square. Gap is `0.3em`. |
+| `icon` | `boolean` | `true` | `false` renders text only. |
+| `href` | `string` | none | Root is an `<a>` with a focus ring. Otherwise a `<span>`. |
+| `className` | `string` | none | On the root. |
+| `target`, `rel`, `aria-label`, `title`, `id` | as `<a>` | none | Forwarded to the root. `target="_blank"` is never forced. |
+
+```tsx
+import { AppWordmark } from "@vvedantb/ui"
+
+<AppWordmark app="vmem" />                                  {/* header, 24 */}
+<AppWordmark app="vmem" size={16} />                        {/* menu or footer */}
+<AppWordmark app="vibot" icon={false} />                    {/* text only */}
+<AppWordmark app="vhub" href="https://vhub.projectv.uk" />  {/* link */}
+```
+
 ### `AppMark` (deprecated)
 
 Deprecated in favour of the `Icon*` components for plain marks. Tiles stay here.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.25.1",
+  "version": "0.26.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/src/brand/AppWordmark.tsx

@@ -0,0 +1,56 @@
+import type { AnchorHTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+import { APP_ICONS } from "./AppIcons";
+import type { AppName } from "./svg";
+
+/** The five product apps. `projectv` keeps its Michroma wordmark and never uses `AppWordmark`. */
+export type ProductAppName = Exclude<AppName, "projectv">;
+
+export type AppWordmarkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "rel" | "aria-label" | "title" | "id"> & {
+  /** Which product app's name to show. The label is always the lowercase app id. */
+  app: ProductAppName;
+  /** Text font size in px (default 24). The icon is `Math.round(size * 0.875)` px square and the gap is `0.3em`. */
+  size?: number;
+  /** `false` renders the name only (default `true`). */
+  icon?: boolean;
+  /** When set, the root is an `<a>` with a focus ring. Otherwise it is a `<span>`. */
+  href?: string;
+  className?: string;
+};
+
+/** Icon size relative to the text font size. */
+const ICON_SCALE = 0.875;
+
+const FOCUS_RING =
+  "rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+
+/**
+ * Marketing wordmark for a product app: the `Icon*` glyph, then the full lowercase name in Instrument Sans
+ * (`--font-sans`), weight 500, upright. Needs `landing.css` for `.landing-wordmark-text`.
+ * Only the PROJECT V wordmark uses Michroma. App names use no serif and no italic.
+ */
+export function AppWordmark({ app, size = 24, icon = true, href, className, ...rest }: AppWordmarkProps) {
+  const Icon = APP_ICONS[app];
+  const classes = cn("inline-flex flex-row items-center text-foreground", href && FOCUS_RING, className);
+  // Font size sits on the root so the `0.3em` gap tracks the text size. The text node inherits it.
+  const style = { fontSize: size, gap: "0.3em" };
+  const content = (
+    <>
+      {icon ? <Icon size={Math.round(size * ICON_SCALE)} /> : null}
+      <span className="landing-wordmark-text leading-none">{app}</span>
+    </>
+  );
+  if (href) {
+    return (
+      <a {...rest} href={href} className={classes} style={style} data-app={app}>
+        {content}
+      </a>
+    );
+  }
+  return (
+    <span aria-label={rest["aria-label"]} title={rest.title} id={rest.id} className={classes} style={style} data-app={app}>
+      {content}
+    </span>
+  );
+}
+AppWordmark.displayName = "AppWordmark";

package/src/brand/index.ts

@@ -1,4 +1,6 @@
 export * from "./AppIcons";
+export { AppWordmark } from "./AppWordmark";
+export type { AppWordmarkProps, ProductAppName } from "./AppWordmark";
 export { AppMark } from "./AppMark";
 export type { AppMarkProps } from "./AppMark";
 export {

package/src/marketing/PricingModal.tsx

@@ -260,7 +260,7 @@ function PricingModalSingle({
 
 const multiWidth = {
   1: "sm:max-w-md",
-  2: "sm:max-w-3xl",
+  2: "sm:max-w-[68rem]",
   3: "sm:max-w-5xl",
   4: "sm:max-w-6xl",
 } as const;

package/src/marketing/landing.css

@@ -1,7 +1,7 @@
-/* Instrument Serif ships only regular (+ italic). Disable faux-bold. */
 .landing-wordmark-text {
-  font-family: var(--font-instrumentSerif);
-  font-weight: 400;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  letter-spacing: -0.02em;
   font-synthesis: none;
 }