@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/brand/svg.js

@@ -0,0 +1,252 @@
+// Geometry and raw SVG strings for the family app marks. No imports, so the
+// asset script can load this file directly with Node.
+
+/** Every mark. `eva` and `bee` are marks and icons only: they are not family apps, so `FAMILY_APPS` leaves them out. */
+export const APP_NAMES = ["projectv", "vibot", "vhub", "vmem", "verve", "velth", "eva", "bee"];
+
+/** `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 const MARK_VIEWBOX = "0 0 1024 1024";
+export const MARK_STROKE_WIDTH = 50;
+export const TILE_RADIUS = 224;
+/** Stroke width of a mark on the 1024 grid. */
+export function markStrokeWidth(app) {
+  return APP_MARKS[app].strokeWidth ?? MARK_STROKE_WIDTH;
+}
+
+/** Line cap of a mark. */
+export function markLinecap(app) {
+  return APP_MARKS[app].linecap ?? "round";
+}
+
+/**
+ * Glyphs sized by one rule: longest side = 512 * min(1.2, aspect^0.25), centred halfway between
+ * the bounding-box centre and the centre of mass. `verve` and `velth` are the final vectors.
+ * `vibot`, `vhub`, `vmem` and `projectv` are traced from the approved 1024px renders. `eva` (option A,
+ * a filled four-point star) and `bee` (option D, an orb with eyes, stripes and antennae) are the final
+ * vectors from their design sheet, as drawn there.
+ */
+export const APP_MARKS = {
+  projectv: {
+    kind: "fill",
+    paths: ["M172 398L260 397L418 558L580 377L858 378L824 415L604 415L452 598L466 611L622 433L808 433L773 471L658 471L491 671L442 672Z"]
+  },
+  vibot: {
+    kind: "fill",
+    paths: ["M295 314L396 314L396 574C520 540 620 440 655 314L711 314C680 470 560 590 396 627L390 627L390 651L396 651C560 610 700 480 734 314L789 314C740 540 560 712 295 712Z"]
+  },
+  vhub: {
+    kind: "stroke",
+    paths: ["M211 512L743 512", "M415 512C500 512 540 363 743 363", "M415 512C500 512 540 661 743 661"]
+  },
+  vmem: {
+    kind: "stroke",
+    strokeWidth: 58,
+    linecap: "butt",
+    paths: ["M693.2 379.5A227.25 227.25 0 0 1 581.0 732.7", "M442.5 732.7A227.25 227.25 0 0 1 330.9 378.7", "M397.3 319.9A227.25 227.25 0 0 1 627.1 320.4"]
+  },
+  verve: {
+    kind: "stroke",
+    paths: ["M285.4 344.1Q428.6 344.1 512 552.6Q595.4 344.1 738.6 344.1", "M285.4 344.1L285.4 579.8Q428.6 579.8 512 706.7Q595.4 579.8 738.6 579.8L738.6 344.1"]
+  },
+  velth: {
+    kind: "stroke",
+    paths: ["M512 732.3C379.8 652.1 289.7 471.9 299.7 301.6C419.9 371.7 500 552 512 732.3Z", "M512 732.3C644.2 652.1 734.3 471.9 724.3 301.6C604.1 371.7 524 552 512 732.3Z"]
+  },
+  eva: {
+    kind: "fill",
+    paths: ["M242.9 512Q485.1 485.1 512 278.8Q538.9 485.1 781 512Q538.9 538.9 512 745.1Q485.1 538.9 242.9 512Z"]
+  },
+  bee: {
+    kind: "stroke",
+    paths: ["M304 530.7A208.1 208.1 0 1 1 720.1 530.7A208.1 208.1 0 1 1 304 530.7", "M447.5 414.2L447.5 445.4", "M576.5 414.2L576.5 445.4", "M306.3 561.9L717.7 561.9", "M344 653.4L680 653.4", "M468.3 341.4Q455.8 291.4 420.5 260.2", "M555.7 341.4Q568.2 291.4 603.5 260.2"]
+  }
+};
+/** Roots in (0, 1) of the derivative of a Bezier with 1D control values `v` (quadratic or cubic). */
+function bezierExtrema(v) {
+  const roots = [];
+  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, t) {
+  const u = 1 - t;
+  const [p0, p1, p2, p3] = v;
+  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, [rx0, ry0,, large, sweep, x, y]) {
+  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 = [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) {
+  const tokens = d.match(/[MLQCA]|-?\d*\.?\d+(?:e-?\d+)?/g) ?? [];
+  const points = [];
+  let cmd = "";
+  let cur = [0, 0];
+  const argc = {
+    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 = [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));
+    }
+    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) {
+  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];
+}
+
+/**
+ * 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.
+ * Historical: this union covers those five only. `eva` and `bee` reuse the 629 side but are not part of it.
+ */
+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. Every mark except `projectv` keeps 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 = {
+  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",
+  eva: "197.45 197.45 629 629",
+  bee: "197.55 187.2807619340906 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 = {
+  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",
+  eva: "242.9 197.45 629 629",
+  bee: "278.94999999999993 187.2807619340906 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. */
+export function markAspect(app) {
+  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`. */
+export function markPaintAttrs(app, color) {
+  return APP_MARKS[app].kind === "fill" ? `fill="${color}"` : `fill="none" stroke="${color}" stroke-width="${markStrokeWidth(app)}" stroke-linecap="${markLinecap(app)}" stroke-linejoin="round"`;
+}
+function pathElements(app) {
+  return APP_MARKS[app].paths.map(d => `<path d="${d}"/>`).join("");
+}
+
+/** Glyph only on its equalised square viewBox, painted with `color` (default `currentColor`). */
+export function appMarkSvg(app, color = "currentColor") {
+  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). */
+export function appTileSvg(app, tone = "dark", radius = TILE_RADIUS) {
+  const [bg, fg] = tone === "dark" ? ["#000", "#fff"] : ["#fff", "#000"];
+  const rx = radius > 0 ? ` rx="${radius}"` : "";
+  return `<svg ${NS} viewBox="${MARK_VIEWBOX}"><rect width="1024" height="1024"${rx} fill="${bg}"/><g ${markPaintAttrs(app, fg)}>${pathElements(app)}</g></svg>\n`;
+}
+
+/** Android adaptive-icon layer: 432 canvas, glyph scaled into the 288 inner square. */
+export function appAdaptiveSvg(app, color) {
+  const scale = 288 / 1024;
+  return `<svg ${NS} viewBox="0 0 432 432"><g transform="translate(216 216) scale(${scale}) translate(-512 -512)" ${markPaintAttrs(app, color)}>${pathElements(app)}</g></svg>\n`;
+}
+
+/** Chrome extension 128px icon: 96px tile plus 16px transparent padding. */
+export function appExtension128Svg(app) {
+  const inner = appTileSvg(app).replace(`<svg ${NS} viewBox="${MARK_VIEWBOX}">`, `<svg ${NS} x="16" y="16" width="96" height="96" viewBox="${MARK_VIEWBOX}">`);
+  return `<svg ${NS} viewBox="0 0 128 128">${inner.trim()}</svg>\n`;
+}
+export const APP_MARK_SVG = Object.fromEntries(APP_NAMES.map(app => [app, appMarkSvg(app)]));
+export const APP_TILE_SVG = Object.fromEntries(APP_NAMES.map(app => [app, appTileSvg(app)]));
+export const APP_TILE_LIGHT_SVG = Object.fromEntries(APP_NAMES.map(app => [app, appTileSvg(app, "light")]));

package/dist/brand/vProAppBenefits.js

@@ -0,0 +1,19 @@
+/** Benefits for one app, shown under that app's icon and name. */
+
+/** Approved per-app copy for V Pro, in display order. */
+export const V_PRO_APP_BENEFITS = [{
+  app: "vibot",
+  items: ["Higher AI limits/usage", "Smarter AI for chats, documents & sub-agents"]
+}, {
+  app: "vmem",
+  items: ["Unlimited memories", "Higher AI search & connected-tool limits"]
+}, {
+  app: "vhub",
+  items: ["Unlimited scripts", "More connections, secrets & API keys"]
+}, {
+  app: "velth",
+  items: ["Unlimited camera scans", "Smarter AI health insights"]
+}, {
+  app: "verve",
+  items: ["Page version history", "Higher AI rewrite & summary limits"]
+}];

package/dist/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

package/dist/colors.js

@@ -0,0 +1,15 @@
+import { tokens } from "./tokens";
+export const NEUTRAL_100 = "#f5f5f5";
+export const NEUTRAL_500 = tokens.color.muted.light;
+export const NEUTRAL_900 = "#171717";
+export const PINK_50 = "#fdf2f8";
+export const PINK_100 = "#fce7f3";
+export const PINK_600 = "#db2777";
+export const PINK_700 = "#be185d";
+export const Colors = {
+  white: tokens.color.white,
+  black: tokens.color.black,
+  neutral: {
+    800: "#262626"
+  }
+};

package/dist/configureTheme.js

@@ -0,0 +1,72 @@
+import { palette } from "./palette";
+import { tokens } from "./tokens";
+import { fontFamily } from "./typography";
+
+/** `tokens` and `palette` value types with the literal hex widened to `string` and `readonly` dropped. */
+
+/** The `tokens.color` shape: each key a `{ light, dark }` pair, except `white` and `black`. */
+
+/** The `palette` shape: each key a `{ light, dark }` pair, except `destructive`. */
+
+/**
+ * Copies each given key onto `target`. A `{ light, dark }` pair is copied into
+ * the existing pair object, so values that hold the pair (`floatingFill`,
+ * `floatingHairline`, `floatingSolidFill`) follow it.
+ */
+function assignValues(target, source) {
+  for (const [key, value] of Object.entries(source)) {
+    if (value === undefined) continue;
+    const current = target[key];
+    if (typeof current === "object" && typeof value === "object") Object.assign(current, value);else Object.assign(target, {
+      [key]: value
+    });
+  }
+}
+
+/** Bumped by each `configureTheme` call; `useScheme` redraws on it. */
+let themeVersion = 0;
+const themeListeners = new Set();
+
+/** Calls `listener` after each `configureTheme`. Returns the unsubscribe. */
+export function subscribeTheme(listener) {
+  themeListeners.add(listener);
+  return () => {
+    themeListeners.delete(listener);
+  };
+}
+
+/** The number of `configureTheme` calls so far, a snapshot for `useSyncExternalStore`. */
+export function getThemeVersion() {
+  return themeVersion;
+}
+
+/**
+ * Sets the app's own colours and fonts. It writes into the shared
+ * `tokens.color`, `palette` and `fontFamily` objects, which every component
+ * reads at render. Call it once at app start, before the first render (for
+ * example at the top of the root `_layout.tsx`, outside the component). A
+ * later call (for example a second dark palette the user picks) redraws the
+ * mounted components under `NativeUiProvider` that read the scheme (`useScheme`); app code that copies
+ * values out, or memoises on the scheme alone, must redraw on its own. Each
+ * pair gives both schemes:
+ *
+ * ```ts
+ * configureTheme({
+ *   color: { background: { light: "#f4f5f6", dark: "#020202" } },
+ *   palette: { primary: { light: "#09090b", dark: "#fafafa" } },
+ *   font: { regular: "Inter_400Regular", semibold: "Inter_600SemiBold" },
+ * });
+ * ```
+ *
+ * Only the JS values change. NativeWind classes keep the app's Tailwind theme
+ * (`tailwind-preset` reads the package values from source; pass the same
+ * family names to `nativeUiPreset({ font })`), and constants copied out before
+ * the call (`NEUTRAL_500`) keep the package value. The app loads the font files.
+ */
+export function configureTheme(config) {
+  if (config.color) assignValues(tokens.color, config.color);
+  if (config.palette) assignValues(palette, config.palette);
+  if (config.font) assignValues(fontFamily, config.font);
+  themeVersion += 1;
+  for (const listener of themeListeners) listener();
+}