@vvedantb/ui 0.24.0 → 0.25.1

package/README.md

@@ -879,7 +879,7 @@ links under a separator.
 ### `Icon*` app icons
 
 Tabler-style plain app glyphs: `IconVibot`, `IconVhub`, `IconVmem`, `IconVerve`,
-`IconVelth` and `IconProjectV`. No background, no padding. `APP_ICONS[app]`
+`IconVelth` and `IconProjectV`. No background. Each sits on an equalised square viewBox, so all apps look the same size. `APP_ICONS[app]`
 looks one up by `AppName`.
 
 ```tsx
@@ -888,24 +888,36 @@ import { IconVerve } from "@vvedantb/ui"
 <IconVerve size={24} color="currentColor" />
 ```
 
-`size` is the height (default 24) and the width follows the glyph. `color`
+`size` sets both width and height (default 24; a string is any CSS length). `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>`.
 
+`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.
 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
+- `variant="mark"` (default) is the plain logo in `currentColor`. It sits
+  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.
+- `variant="tile"` and `"tile-light"` use the same 1024 grid on a
   rounded tile, always square. `appTileSvg`, `appAdaptiveSvg`, `appExtension128Svg`,
   `APP_TILE_SVG`, `APP_TILE_LIGHT_SVG` and favicons are unchanged.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.24.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,8 +1,8 @@
 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";
+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 height. Default 24. A number gives the width from the glyph's aspect ratio; a string sets width and height to the same value. */
+  /** Rendered width and height (the glyph is square). Default 24. A number is in pixels; a string is any CSS length. */
   size?: number | string;
   /** Glyph colour, for fill and stroke glyphs. Default `"currentColor"`. */
   color?: string;
@@ -10,24 +10,25 @@ 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>>;
 
-function viewBoxHeight(app: AppName): number {
+function viewBoxSide(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 },
+    { size = 24, color = "currentColor", stroke, title, align = "center", ...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 renderedSize = typeof size === "number" ? size : 24;
+    const strokeWidth = stroke === undefined ? markStrokeWidth(app) : Number(stroke) * (viewBoxSide(app) / renderedSize);
     const glyphProps =
       kind === "fill"
         ? { fill: color }
@@ -37,11 +38,12 @@ function createAppIcon(app: AppName, displayName: string): AppIconComponent {
         {...rest}
         ref={ref}
         xmlns="http://www.w3.org/2000/svg"
-        width={width}
+        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/AppMark.tsx

@@ -5,12 +5,10 @@ import { APP_MARKS, MARK_VIEWBOX, TILE_RADIUS, markLinecap, markStrokeWidth, typ
 export type AppMarkProps = Omit<SVGProps<SVGSVGElement>, "children" | "height" | "width" | "viewBox"> & {
   /** Which family app's mark to draw. */
   app: AppName;
-  /** `"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. */
+  /** `"mark"` (default): plain logo in `currentColor` on an equalised square viewBox, so every app looks the same size. `"tile"`: white glyph on a black rounded tile. `"tile-light"`: black glyph on a white tile. */
   variant?: AppMarkVariant;
   /**
-   * 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`.
+   * Default 24. Sets both width and height, for marks and tiles alike (always square). A string is any CSS length.
    */
   size?: number | string;
   /** Accessible name. Without it the mark is `aria-hidden`. */
@@ -23,7 +21,7 @@ const TILE_TONES = {
 } 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 and the tiles share the same square 1024 viewBox, so a bare glyph matches the tile glyph optically.
  * @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) {

package/src/brand/index.ts

@@ -3,7 +3,10 @@ export { AppMark } from "./AppMark";
 export type { AppMarkProps } from "./AppMark";
 export {
   APP_MARKS,
+  APP_MARK_CROP_VIEWBOX,
   APP_MARK_VIEWBOX,
+  APP_MARK_VIEWBOX_START,
+  PROJECTV_MARK_VIEWBOX,
   APP_MARK_SVG,
   APP_NAMES,
   APP_TILE_LIGHT_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, cropped tight, follows `currentColor`. `tile`: white glyph on a black tile. `tile-light`: black glyph on a white tile. */
+/** `mark`: glyph only on an equalised square viewBox, 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";
@@ -175,20 +175,49 @@ export function markBBox(app: AppName): Box {
 
 
 /**
- * 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`.
+ * 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";
+
+/**
+ * `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 = "171.5 181 687 687";
+
+/**
+ * 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: "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",
+  projectv: PROJECTV_MARK_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 tight viewBox. */
+/** 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. */
 export function markAspect(app: AppName): number {
   const [, , w = 1, h = 1] = APP_MARK_VIEWBOX[app].split(" ").map(Number);
   return w / h;
@@ -205,7 +234,7 @@ function pathElements(app: AppName): string {
   return APP_MARKS[app].paths.map((d) => `<path d="${d}"/>`).join("");
 }
 
-/** Glyph only, cropped tight with no padding, painted with `color` (default `currentColor`). */
+/** Glyph only on its equalised square viewBox, painted with `color` (default `currentColor`). */
 export function appMarkSvg(app: AppName, color = "currentColor"): string {
   return `<svg ${NS} viewBox="${APP_MARK_VIEWBOX[app]}" ${markPaintAttrs(app, color)}>${pathElements(app)}</svg>\n`;
 }

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",
     ],
   },