@vvedantb/ui 0.25.0 → 0.25.1

package/README.md

@@ -893,6 +893,15 @@ 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>`.
 
+`align?: "center" | "start"` (0.25.1, default `"center"`) sets where the glyph sits
+in its equal-size square. `"start"` left-aligns the glyph's ink in the same square
+(same scale, same `size` x `size` box), so labels line up in a vertical list.
+`APP_MARK_VIEWBOX_START` holds the viewBoxes.
+
+```tsx
+<IconVmem size={16} align="start" />
+```
+
 ### `AppMark` (deprecated)
 
 Deprecated in favour of the `Icon*` components for plain marks. Tiles stay here.
@@ -900,11 +909,11 @@ Family app icons: `app` (`projectv`, `vibot`, `vhub`, `vmem`, `verve`, `velth`),
 `variant`, `size`, `title`.
 
 - `variant="mark"` (default) is the plain logo in `currentColor`. It sits
-  on a square viewBox. The five apps (`vibot`, `vhub`, `vmem`, `verve`, `velth`) share one
-  crop (`APP_MARK_CROP_VIEWBOX`, `173 197 629 629`): the union of their glyph boxes on the
-  1024 tile grid, centred, with about 4% padding, so relative glyph sizes match the tiles and
-  the widest glyph fills about 92% of the icon box. `projectv` is a brand mark, so it has its
-  own tight square (`PROJECTV_MARK_VIEWBOX`, `172 181 687 687`). `size` sets both width and
+  on a square viewBox. The five apps (`vibot`, `vhub`, `vmem`, `verve`, `velth`) keep one
+  frame size, 629 x 629 (`APP_MARK_CROP_VIEWBOX` is the historical `173 197 629 629`), so relative
+  glyph sizes match the tiles. Each viewBox origin is centred on that glyph's `markBBox`, so no
+  glyph sits off-centre in its square. `projectv` is a brand mark, so it keeps its own 687 frame,
+  centred on its bbox (`PROJECTV_MARK_VIEWBOX`, `171.5 181 687 687`). `size` sets both width and
   height; a string `size` (for example `"2rem"`) is any CSS length. `APP_MARK_VIEWBOX` holds the
   viewBox for each app; `appMarkSvg()` and `APP_MARK_SVG` use it. `markAspect` returns
   1 and is kept for API stability only.

package/package.json

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

@@ -1,5 +1,5 @@
 import { forwardRef, useId, type ForwardRefExoticComponent, type RefAttributes, type SVGProps } from "react";
-import { APP_MARKS, APP_MARK_VIEWBOX, APP_NAMES, markLinecap, markStrokeWidth, type AppName } from "./svg";
+import { APP_MARKS, APP_MARK_VIEWBOX, APP_MARK_VIEWBOX_START, APP_NAMES, markLinecap, markStrokeWidth, type AppName } from "./svg";
 
 export type AppIconProps = Omit<SVGProps<SVGSVGElement>, "children" | "height" | "width" | "viewBox" | "stroke" | "color"> & {
   /** Rendered width and height (the glyph is square). Default 24. A number is in pixels; a string is any CSS length. */
@@ -10,6 +10,8 @@ export type AppIconProps = Omit<SVGProps<SVGSVGElement>, "children" | "height" |
   stroke?: number | string;
   /** Accessible name. Without it the icon is `aria-hidden`. */
   title?: string;
+  /** Where the glyph sits in its equal-size square. `"center"` (default) centres it. `"start"` left-aligns the glyph's ink in the same square, so labels line up in a vertical list. The rendered box stays `size` x `size`. */
+  align?: "center" | "start";
 };
 
 export type AppIconComponent = ForwardRefExoticComponent<AppIconProps & RefAttributes<SVGSVGElement>>;
@@ -20,7 +22,7 @@ function viewBoxSide(app: AppName): number {
 
 function createAppIcon(app: AppName, displayName: string): AppIconComponent {
   const Icon = forwardRef<SVGSVGElement, AppIconProps>(function Icon(
-    { size = 24, color = "currentColor", stroke, title, ...rest },
+    { size = 24, color = "currentColor", stroke, title, align = "center", ...rest },
     ref,
   ) {
     const titleId = useId();
@@ -38,9 +40,10 @@ function createAppIcon(app: AppName, displayName: string): AppIconComponent {
         xmlns="http://www.w3.org/2000/svg"
         width={size}
         height={size}
-        viewBox={APP_MARK_VIEWBOX[app]}
+        viewBox={align === "start" ? APP_MARK_VIEWBOX_START[app] : APP_MARK_VIEWBOX[app]}
         preserveAspectRatio="xMidYMid meet"
         data-app={app}
+        data-align={align}
         role={title ? "img" : undefined}
         aria-hidden={title ? undefined : true}
         aria-labelledby={title ? titleId : undefined}

package/src/brand/index.ts

@@ -5,6 +5,7 @@ export {
   APP_MARKS,
   APP_MARK_CROP_VIEWBOX,
   APP_MARK_VIEWBOX,
+  APP_MARK_VIEWBOX_START,
   PROJECTV_MARK_VIEWBOX,
   APP_MARK_SVG,
   APP_NAMES,

package/src/brand/svg.ts

@@ -175,27 +175,46 @@ export function markBBox(app: AppName): Box {
 
 
 /**
- * Shared crop for the five app glyphs (`vibot`, `vhub`, `vmem`, `verve`, `velth`) in the plain logo (`variant="mark"`,
- * `appMarkSvg`, `Icon*`): the union of their `markBBox` results on the 1024 tile grid (x 186 to 789, y 259.96 to 761.7),
- * centred in a square of side max(width, height) x 1.04 (about 4% padding), then rounded outward to whole units.
- * `projectv` is left out so its wide brand mark does not shrink the app glyphs. Not the full tile. Checked in tests.
+ * Frame size for the five app glyphs (`vibot`, `vhub`, `vmem`, `verve`, `velth`) in the plain logo (`variant="mark"`,
+ * `appMarkSvg`, `Icon*`): a 629 x 629 square, the union of their `markBBox` results on the 1024 tile grid
+ * (x 186 to 789, y 259.96 to 761.7) at side max(width, height) x 1.04 (about 4% padding), rounded outward.
+ * All five use this side, so glyph scale stays equal. Only the size is shared: each app has its own origin in
+ * `APP_MARK_VIEWBOX`. `projectv` is left out so its wide brand mark does not shrink the app glyphs.
  */
 export const APP_MARK_CROP_VIEWBOX = "173 197 629 629";
 
 /**
- * Own tight square for `projectv` (a brand mark, not an app): `markBBox("projectv")` (x 172 to 858, y 377 to 672),
- * centred on the shorter axis and rounded outward to whole units, with no extra padding.
+ * `projectv` (a brand mark, not an app) keeps a 687 x 687 frame, centred on `markBBox("projectv")`
+ * (x 172 to 858, y 377 to 672, centre 515 x 524.5), with no extra padding.
  */
-export const PROJECTV_MARK_VIEWBOX = "172 181 687 687";
+export const PROJECTV_MARK_VIEWBOX = "171.5 181 687 687";
 
-/** Plain-mark viewBox per app: the shared crop for the five apps, a tight square for `projectv`. Always square. */
+/**
+ * Plain-mark viewBox per app. Always square. The five apps keep one 629 side (equal scale), and each origin is
+ * `markBBox(app)` centre minus 314.5 on both axes, so every glyph sits centred in its own frame. `projectv` uses
+ * its 687 frame, centre minus 343.5. Hardcoded; checked against `markBBox` in tests.
+ */
 export const APP_MARK_VIEWBOX: Record<AppName, string> = {
   projectv: PROJECTV_MARK_VIEWBOX,
-  vibot: APP_MARK_CROP_VIEWBOX,
-  vhub: APP_MARK_CROP_VIEWBOX,
-  vmem: APP_MARK_CROP_VIEWBOX,
-  verve: APP_MARK_CROP_VIEWBOX,
-  velth: APP_MARK_CROP_VIEWBOX,
+  vibot: "227.5 198.5 629 629",
+  vhub: "162.5 197.5 629 629",
+  vmem: "197.24772201231343 196.33100022273135 629 629",
+  verve: "197.5 210.9 629 629",
+  velth: "197.5 202.45 629 629",
+};
+
+/**
+ * Start-aligned viewBox per app, for `Icon*` `align="start"`. Same side and same y as `APP_MARK_VIEWBOX`; x is
+ * `markBBox(app)` minX, so the glyph's left ink edge sits flush with the frame's left edge. Hardcoded; checked
+ * against `markBBox` in tests.
+ */
+export const APP_MARK_VIEWBOX_START: Record<AppName, string> = {
+  projectv: "172 181 687 687",
+  vibot: "295 198.5 629 629",
+  vhub: "186 197.5 629 629",
+  vmem: "255.5301217210191 196.33100022273135 629 629",
+  verve: "260.4 210.9 629 629",
+  velth: "273.9433593555699 202.45 629 629",
 };
 
 /** Width over height of a mark's viewBox. Always about 1, because the viewBoxes are square. Kept for API stability; do not use it for sizing. */

package/src/brand/vProAppBenefits.ts

@@ -11,9 +11,7 @@ export const V_PRO_APP_BENEFITS: readonly PricingPlanAppBenefit[] = [
   {
     app: "vibot",
     items: [
-      "1000 messages / day",
-      "100 image gens / day",
-      "100 deep & 20 extreme searches / day",
+      "Higher AI limits/usage",
       "Smarter AI for chats, documents & sub-agents",
     ],
   },