@vvedantb/ui 0.24.0 → 0.25.0

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,7 +888,7 @@ 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>`.
@@ -899,13 +899,16 @@ 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`) 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
+  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.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/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_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;
@@ -14,7 +14,7 @@ export type AppIconProps = Omit<SVGProps<SVGSVGElement>, "children" | "height" |
 
 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]);
 }
 
@@ -25,9 +25,8 @@ function createAppIcon(app: AppName, displayName: string): AppIconComponent {
   ) {
     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,7 +36,7 @@ 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]}
         preserveAspectRatio="xMidYMid meet"

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,9 @@ export { AppMark } from "./AppMark";
 export type { AppMarkProps } from "./AppMark";
 export {
   APP_MARKS,
+  APP_MARK_CROP_VIEWBOX,
   APP_MARK_VIEWBOX,
+  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,30 @@ 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`.
+ * 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.
  */
+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.
+ */
+export const PROJECTV_MARK_VIEWBOX = "172 181 687 687";
+
+/** Plain-mark viewBox per app: the shared crop for the five apps, a tight square for `projectv`. Always square. */
 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: APP_MARK_CROP_VIEWBOX,
+  vhub: APP_MARK_CROP_VIEWBOX,
+  vmem: APP_MARK_CROP_VIEWBOX,
+  verve: APP_MARK_CROP_VIEWBOX,
+  velth: APP_MARK_CROP_VIEWBOX,
 };
 
-/** 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 +215,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`;
 }