@web-my-money/brand 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,380 @@
+import * as React from 'react';
+
+type LogoVariant = "lockup" | "mark" | "wordmark";
+declare const RAW_SVG: Record<string, string>;
+declare const INK_SVG: Record<LogoVariant, string>;
+
+/**
+ * Theme-aware WMM logo. Renders one inline SVG whose ink follows the
+ * `--wmm-logo-ink` CSS variable — white on dark/wmm, navy on light — set by
+ * `@web-my-money/brand/brand.css`. SSR-safe, no flash, no client JS for theming.
+ *
+ *   <WmmLogo />                       // lockup, 28px tall, theme-driven
+ *   <WmmLogo variant="mark" size={32} />
+ *   <WmmLogo variant="wordmark" />    // "WEBMYMONEY" text only
+ *   <WmmLogo tone="white" />          // force a tone (e.g. on a colored CTA)
+ *
+ * `variant`: "lockup" (mark + wordmark) · "mark" (symbol only) · "wordmark" (text only).
+ * Import `@web-my-money/brand/brand.css` once (e.g. in globals.css) so the
+ * per-theme ink var resolves; without it the logo falls back to `currentColor`.
+ */
+type WmmLogoTone = "auto" | "white" | "navy" | "currentColor" | "full";
+interface WmmLogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "title"> {
+    /** "lockup" = mark + wordmark (default), "mark" = symbol only, "wordmark" = text only. */
+    variant?: LogoVariant;
+    /** Rendered height in px (width scales with the artwork). Default 28. */
+    size?: number;
+    /** Force a color; "auto" (default) follows the theme via --wmm-logo-ink. */
+    tone?: WmmLogoTone;
+    /** Accessible label. Default "Web My Money". */
+    title?: string;
+}
+declare function WmmLogo({ variant, size, tone, title, className, style, ...rest }: WmmLogoProps): React.JSX.Element;
+
+interface WmmLogo3DProps extends Omit<WmmLogoProps, "size"> {
+    /** Rendered logo height in px. Default 96. */
+    size?: number;
+    /** Max pointer tilt in degrees. Default 18. */
+    max?: number;
+    /** Float gently when the pointer is away (needs the tokens theme CSS for the keyframe). Default true. */
+    idle?: boolean;
+    /** Soft contact shadow beneath the mark. Default true. */
+    shadow?: boolean;
+}
+/**
+ * 3D treatment of the WMM logo — interactive parallax tilt + idle float + depth
+ * shadow, all in CSS transforms. No WebGL, no binary 3D assets, no animation
+ * library — light and fast. Defaults to the `mark` variant (best in 3D).
+ *
+ *   <WmmLogo3D />                 // tilting mark, 96px
+ *   <WmmLogo3D variant="lockup" size={64} />
+ *
+ * For a fully pre-rendered 3D logo instead, use an <img> of a Drive render.
+ */
+declare function WmmLogo3D({ variant, size, max, idle, shadow, ...logoProps }: WmmLogo3DProps): React.JSX.Element;
+
+/**
+ * Living WMM brand board — renders the palette, gradients, logo variants and
+ * type specimen from the canonical brand tokens. Self-contained (inline styles,
+ * no Tailwind/token dependency) so it drops into ANY app as a brand reference.
+ *
+ *   import { WmmBrandboard } from "@web-my-money/brand";
+ *   <WmmBrandboard />
+ */
+interface WmmBrandboardProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function WmmBrandboard({ className, style }: WmmBrandboardProps): React.JSX.Element;
+
+interface WmmAssetProps extends React.HTMLAttributes<HTMLElement> {
+    /** Registry id, e.g. "mark-white", "lockup-blue", "3d-renders". */
+    id: string;
+    /** Force rendering as an <img> from the CDN instead of inline SVG. */
+    asImage?: boolean;
+    /** Override the CDN base. */
+    base?: string;
+    /** Rendered height in px (vectors) or width for images. */
+    size?: number;
+    alt?: string;
+}
+/**
+ * Render any brand asset by registry id. Bundled vectors render inline (crisp,
+ * no network); published assets can render from the CDN with `asImage`; Drive-
+ * only assets render a link to the vault.
+ *
+ *   <WmmAsset id="mark-white" size={48} />
+ *   <WmmAsset id="lockup-blue" asImage />     // <img> from CDN
+ *   <WmmAsset id="3d-renders" />              // link to Drive folder
+ */
+declare function WmmAsset({ id, asImage, base, size, alt, className, style, ...rest }: WmmAssetProps): React.JSX.Element | null;
+
+interface WmmLogoMotionProps {
+    /**
+     * Published video URL of the animated logo (mp4/webm) — from the brand CDN or
+     * a direct Drive file link. Without it, falls back to the static mark.
+     */
+    src?: string;
+    /** Optional poster image URL. */
+    poster?: string;
+    /** Rendered height in px. Default 96. */
+    size?: number;
+    /** Loop the motion. Default true. */
+    loop?: boolean;
+    className?: string;
+}
+/**
+ * Plays the WMM "logo in motion" asset as a lightweight, autoplaying, muted
+ * inline video (no animation library). Falls back to the static <WmmLogo mark>
+ * when no `src` is provided or video can't play — so it's always safe to render.
+ *
+ *   import { WMM_DRIVE } from "@web-my-money/brand";
+ *   <WmmLogoMotion src={`${cdn}/motion/logo-loop.webm`} size={120} />
+ */
+declare function WmmLogoMotion({ src, poster, size, loop, className }: WmmLogoMotionProps): React.JSX.Element;
+
+/**
+ * Theme → logo tone resolution. Single source of the rule the brand team set:
+ * white logo on dark/wmm surfaces, navy ("blue") logo on light surfaces.
+ *
+ * The <WmmLogo> component does NOT need this — it renders one geometry whose ink
+ * follows the `--wmm-logo-ink` CSS var per theme. Use this only for raw-asset
+ * consumers (CDN, <img>, favicons, emails) that must pick a concrete file.
+ */
+type ThemeName = "light" | "dark" | "wmm";
+type LogoTone$1 = "white" | "blue";
+declare function resolveLogoTone(theme: ThemeName | string | null | undefined): LogoTone$1;
+/** Filename (without extension) of the raw asset for a shape + theme. */
+declare function rawLogoKey(shape: "isologotipo" | "isotipo" | "logotipo", theme: ThemeName | string | null | undefined): string;
+
+interface WmmMetadataOptions {
+    /** App name → title "WMM <appName>" + "%s · WMM <appName>" template. */
+    appName?: string;
+    description?: string;
+    /** Override the favicon (raw SVG markup). Defaults to the navy isotipo. */
+    favicon?: string;
+}
+declare function wmmMetadata(opts?: WmmMetadataOptions): {
+    title: string | {
+        default: string;
+        template: string;
+    };
+    description: string | undefined;
+    icons: {
+        icon: {
+            url: string;
+            type: string;
+        }[];
+    };
+    openGraph: {
+        title: string;
+        description: string | undefined;
+        siteName: string;
+        type: string;
+    };
+};
+/** Next 15 wants themeColor in `viewport`, not `metadata`. */
+declare function wmmViewport(themeColor?: string): {
+    themeColor: string;
+};
+
+declare const wmmColors: {
+    readonly aqua: "#8fccb6";
+    readonly periwinkle: "#869ce2";
+    readonly blueLift: "#7388cf";
+    readonly spaceCadet: "#1f2d56";
+    readonly teal: "#8fccb6";
+    readonly violet: "#869ce2";
+    readonly sky: "#7388cf";
+    readonly navy: "#080b14";
+    readonly surface: "#0b1322";
+    readonly card: "#0f172a";
+    readonly overlay: "#16203a";
+    readonly foreground: "#f8fafc";
+    readonly mutedForeground: "#94a3b8";
+    readonly faint: "#64748b";
+    readonly primaryForeground: "#04201c";
+    readonly accentForeground: "#0a1222";
+    readonly border: "rgba(255, 255, 255, 0.08)";
+    readonly borderStrong: "rgba(255, 255, 255, 0.14)";
+    readonly danger: "#ef4444";
+    readonly warn: "#f59e0b";
+    readonly ok: "#22c55e";
+    readonly logoInkLight: "#1f2d56";
+    readonly logoInkDark: "#fbfbfb";
+    readonly glow: "rgba(143, 204, 182, 0.15)";
+};
+
+/**
+ * WMM brand tokens — the canonical Web My Money brand values, as plain
+ * JS/TS objects (hex + rgba, no CSS vars) so they work EVERYWHERE: web,
+ * React Native, email, design tooling, other languages via the JSON manifest.
+ *
+ * Source of truth for the WMM marketing palette — mirrors the `wmm` theme in
+ * @web-my-money/tokens (palette.mjs) and the live wmm-website. Edit here only
+ * for brand-level changes; per-app theming still goes through the tokens themes.
+ */
+
+/** Brand gradients — mirror production (wmm-website hero + CTA). */
+declare const wmmGradients: {
+    readonly brand: "linear-gradient(135deg, #1f2d56 0%, #8fccb6 100%)";
+    readonly heroText: "linear-gradient(118deg, #8aa0e6 0%, #7388cf 42%, #8fccb6 100%)";
+    readonly hero: "linear-gradient(180deg, #070b13 0%, #080c14 46%, #0a1220 100%)";
+    readonly aquaGlow: "radial-gradient(ellipse at 50% 0%, rgba(143,204,182,0.18) 0%, transparent 70%)";
+    readonly periwinkleGlow: "radial-gradient(ellipse at 84% 6%, rgba(115,136,207,0.14) 0%, transparent 60%)";
+    readonly shine: "linear-gradient(105deg, transparent 40%, rgba(143,204,182,0.10) 50%, transparent 60%)";
+};
+/** Brand typography — Satoshi (display) over Inter (body), Space Grotesk fallback. */
+declare const wmmTypography: {
+    readonly fontDisplay: "\"Satoshi\", \"Space Grotesk\", system-ui, sans-serif";
+    readonly fontSans: "\"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif";
+    readonly fontMono: "ui-monospace, \"JetBrains Mono\", \"Fira Code\", monospace";
+    /** The brand display face, shipped via @web-my-money/tokens/fonts.css. */
+    readonly displayFace: "Satoshi";
+    readonly weights: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+        readonly black: 900;
+    };
+};
+/** Brand identity facts. */
+declare const wmmIdentity: {
+    readonly name: "Web My Money";
+    readonly short: "WMM";
+    readonly domain: "webmymoney.com";
+    readonly themeColor: "#080c14";
+};
+/**
+ * Single aggregated brand manifest — JSON-serialisable. Consume from any
+ * JS/TS runtime (web, React Native, Node) or read the shipped manifest as data.
+ */
+declare const wmmManifest: {
+    readonly identity: {
+        readonly name: "Web My Money";
+        readonly short: "WMM";
+        readonly domain: "webmymoney.com";
+        readonly themeColor: "#080c14";
+    };
+    readonly colors: {
+        readonly aqua: "#8fccb6";
+        readonly periwinkle: "#869ce2";
+        readonly blueLift: "#7388cf";
+        readonly spaceCadet: "#1f2d56";
+        readonly teal: "#8fccb6";
+        readonly violet: "#869ce2";
+        readonly sky: "#7388cf";
+        readonly navy: "#080b14";
+        readonly surface: "#0b1322";
+        readonly card: "#0f172a";
+        readonly overlay: "#16203a";
+        readonly foreground: "#f8fafc";
+        readonly mutedForeground: "#94a3b8";
+        readonly faint: "#64748b";
+        readonly primaryForeground: "#04201c";
+        readonly accentForeground: "#0a1222";
+        readonly border: "rgba(255, 255, 255, 0.08)";
+        readonly borderStrong: "rgba(255, 255, 255, 0.14)";
+        readonly danger: "#ef4444";
+        readonly warn: "#f59e0b";
+        readonly ok: "#22c55e";
+        readonly logoInkLight: "#1f2d56";
+        readonly logoInkDark: "#fbfbfb";
+        readonly glow: "rgba(143, 204, 182, 0.15)";
+    };
+    readonly gradients: {
+        readonly brand: "linear-gradient(135deg, #1f2d56 0%, #8fccb6 100%)";
+        readonly heroText: "linear-gradient(118deg, #8aa0e6 0%, #7388cf 42%, #8fccb6 100%)";
+        readonly hero: "linear-gradient(180deg, #070b13 0%, #080c14 46%, #0a1220 100%)";
+        readonly aquaGlow: "radial-gradient(ellipse at 50% 0%, rgba(143,204,182,0.18) 0%, transparent 70%)";
+        readonly periwinkleGlow: "radial-gradient(ellipse at 84% 6%, rgba(115,136,207,0.14) 0%, transparent 60%)";
+        readonly shine: "linear-gradient(105deg, transparent 40%, rgba(143,204,182,0.10) 50%, transparent 60%)";
+    };
+    readonly typography: {
+        readonly fontDisplay: "\"Satoshi\", \"Space Grotesk\", system-ui, sans-serif";
+        readonly fontSans: "\"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif";
+        readonly fontMono: "ui-monospace, \"JetBrains Mono\", \"Fira Code\", monospace";
+        /** The brand display face, shipped via @web-my-money/tokens/fonts.css. */
+        readonly displayFace: "Satoshi";
+        readonly weights: {
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+            readonly black: 900;
+        };
+    };
+};
+type WmmColors = typeof wmmColors;
+type WmmGradients = typeof wmmGradients;
+type WmmTypography = typeof wmmTypography;
+type WmmManifest = typeof wmmManifest;
+
+type LogoShape = "lockup" | "mark" | "wordmark";
+type LogoTone = "white" | "blue" | "full";
+/** Drive folder IDs + ready-to-open URLs for every brand asset group. */
+declare const WMM_DRIVE: {
+    readonly vaultUrl: string;
+    readonly brandRootUrl: string;
+    readonly twoDUrl: string;
+    readonly threeDUrl: string;
+    readonly svgUrl: string;
+    readonly pngUrl: string;
+    readonly jpgUrl: string;
+    readonly faviconUrl: string;
+    readonly editablesUrl: string;
+    readonly profilePicsUrl: string;
+    readonly googleWorkspaceUrl: string;
+    readonly motionGraphicsUrl: string;
+    readonly threeTexturesUrl: string;
+    readonly threeAnimationUrl: string;
+    readonly threeRendersUrl: string;
+    readonly vault: "1Q3vCA1tM0IsFDhxaKPhJWlAV7EfQufmY";
+    readonly brandRoot: "1J6omjsUEJBQ3FEJGGUz1kJv7PS_fHK29";
+    readonly twoD: "1lNFkLeR0Tw8Wbg7lA4IhIpjqJjRMiWc-";
+    readonly threeD: "1SyBRUYR7QvmRWEFEd0xHvIP8cbzm7ufm";
+    readonly svg: "1dAXNZnVhnp4DqwmuoCd_xz6eWvgKBdYy";
+    readonly png: "1QVM15JJiSOWesL5O1XRNL31t1CimQu1u";
+    readonly jpg: "1DqvVtzgBtt5HQsUzktQg4glZ0t4oQQKS";
+    readonly favicon: "1UDa8pu2i99fFCIhCANf62y1Hnx46n15A";
+    readonly editables: "1lA_CMErZCQRL2SzY3j3A14MJjvTicbLW";
+    readonly profilePics: "1DlNNsYbwOIMXIVSrfO1NRHdHdDCLyATE";
+    readonly googleWorkspace: "1fg3m06tjpHZpG5Wm43iAsc6YVwI-7Lqu";
+    readonly motionGraphics: "1ATY9HjB740KNjCSaq2NkIbt3Um99sC_c";
+    readonly threeTextures: "1xJXvCRlO1bZ15idjbebi06W7O0yBToag";
+    readonly threeAnimation: "1KrbZVE3V1OySk1EISphp1fkot9XEvf7B";
+    readonly threeRenders: "11m9WXI_2hgrTxY3vBLiOJBUFYCpx4kLH";
+};
+interface BrandAsset {
+    id: string;
+    label: string;
+    /** "vector" assets ship inline in this package; "drive" assets live in the vault. */
+    source: "vector" | "drive";
+    /** "2d" | "3d" | "favicon" | "social" | "motion" */
+    kind: "2d" | "3d" | "favicon" | "social" | "motion";
+    /** For vector assets — the RAW_SVG key (also fetchable via resolveAsset). */
+    svgKey?: string;
+    /** CDN path (relative to the asset CDN base) once published via push-assets. */
+    path?: string;
+    /** For drive assets — the Drive folder URL to pull from. */
+    driveUrl?: string;
+    /** Available file formats. */
+    formats: string[];
+    note?: string;
+}
+/** The full brand asset catalog — what exists and where to get it. */
+declare const wmmAssets: BrandAsset[];
+/** Inline SVG markup for a logo shape + tone (bundled vector). */
+declare function resolveAsset(shape: LogoShape, tone?: LogoTone): string;
+/** Look up an asset entry by id. */
+declare function getAsset(id: string): BrandAsset | undefined;
+/** Override the CDN base used to resolve published asset URLs. */
+declare function setAssetCdnBase(url: string): void;
+/** Current CDN base. */
+declare function getAssetCdnBase(): string;
+/** Build a public URL for a CDN path (e.g. "logos/isotipo-white.svg"). */
+declare function assetUrl(path: string, base?: string): string;
+/** Public CDN URL for a logo shape + tone + format (svg/png). */
+declare function logoUrl(shape: LogoShape, tone?: LogoTone, format?: "svg" | "png", base?: string): string;
+/** Resolve a registry asset's public URL (if it has been published). */
+declare function assetUrlById(id: string, base?: string): string | undefined;
+type MotionName = "mark" | "mark-vertical" | "lockup" | "lockup-vertical" | "hero-3d";
+/** CDN path + source Drive file id for each motion asset. */
+declare const WMM_MOTION: Record<MotionName, {
+    path: string;
+    driveId: string;
+}>;
+/** Public CDN URL for an animated logo asset (once published). */
+declare function motionUrl(name?: MotionName, base?: string): string;
+/** 3D still-render CDN paths (heavy PNGs; hero/login backdrops). Published under renders/. */
+declare const WMM_RENDERS: {
+    readonly hero: "renders/webmymoney-1.png";
+    readonly heroNoise: "renders/webmymoney-1-noise.png";
+    readonly plane: "renders/plano-1.png";
+    readonly planeDark: "renders/plano-1-dark.png";
+};
+/** Public CDN URL for a 3D still render (once published). */
+declare function renderUrl(key?: keyof typeof WMM_RENDERS, base?: string): string;
+
+export { type BrandAsset, INK_SVG, type LogoShape, type LogoTone$1 as LogoTone, type LogoVariant, type MotionName, RAW_SVG, type ThemeName, WMM_DRIVE, WMM_MOTION, WMM_RENDERS, WmmAsset, type WmmAssetProps, WmmBrandboard, type WmmBrandboardProps, type WmmColors, type WmmGradients, WmmLogo, WmmLogo3D, type WmmLogo3DProps, WmmLogo as WmmLogoDefault, WmmLogoMotion, type WmmLogoMotionProps, type WmmLogoProps, type WmmLogoTone, type WmmManifest, type WmmMetadataOptions, type WmmTypography, assetUrl, assetUrlById, getAsset, getAssetCdnBase, logoUrl, motionUrl, rawLogoKey, renderUrl, resolveAsset, resolveLogoTone, setAssetCdnBase, wmmAssets, wmmColors, wmmGradients, wmmIdentity, wmmManifest, wmmMetadata, wmmTypography, wmmViewport };