Refresh app icons across release variants

apps/mobile/app.config.ts

@@ -1,5 +1,6 @@
 import type { ExpoConfig } from "expo/config";
 
+import { BRAND_ASSET_PATHS } from "../../scripts/lib/brand-assets.ts";
 import { loadRepoEnv } from "../../scripts/lib/public-config.ts";
 
 type AppVariant = "development" | "preview" | "production";
@@ -13,6 +14,8 @@ const isIosPersonalTeamBuild = repoEnv.T3CODE_IOS_PERSONAL_TEAM === "1";
 const personalTeamBundleIdentifier = repoEnv.T3CODE_IOS_PERSONAL_TEAM_BUNDLE_ID?.trim();
 const IOS_BUNDLE_IDENTIFIER_PATTERN = /^[A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)+$/;
 
+const fromRepoRoot = (relativePath: string) => `../../${relativePath}`;
+
 if (
   isIosPersonalTeamBuild &&
   (!personalTeamBundleIdentifier ||
@@ -24,20 +27,31 @@ if (
 }
 
 const DEVELOPMENT_ASSETS = {
-  appIcon: "./assets/splash-icon-dev.png",
-  iosIcon: "./assets/icon-composer-dev.icon",
-  splashIcon: "./assets/splash-icon-dev.png",
-  androidAdaptiveForeground: "./assets/android-icon-dev-foreground.png",
+  appIcon: fromRepoRoot(BRAND_ASSET_PATHS.developmentIosIconPng),
+  iosIcon: fromRepoRoot(BRAND_ASSET_PATHS.developmentIconComposerProject),
+  splashIcon: fromRepoRoot(BRAND_ASSET_PATHS.developmentIosIconPng),
+  androidAdaptiveForeground: fromRepoRoot(BRAND_ASSET_PATHS.developmentUniversalIconPng),
   androidAdaptiveBackgroundColor: "#00639B",
   androidMonochromeIcon: "./assets/android-icon-mark.png",
   androidNotificationIcon: "./assets/android-notification-icon.png",
   androidNotificationColor: "#00639B",
 } as const;
 
+const PREVIEW_ASSETS = {
+  appIcon: fromRepoRoot(BRAND_ASSET_PATHS.nightlyIosIconPng),
+  iosIcon: fromRepoRoot(BRAND_ASSET_PATHS.nightlyIconComposerProject),
+  splashIcon: fromRepoRoot(BRAND_ASSET_PATHS.nightlyIosIconPng),
+  androidAdaptiveForeground: fromRepoRoot(BRAND_ASSET_PATHS.nightlyLinuxIconPng),
+  androidAdaptiveBackgroundColor: "#111533",
+  androidMonochromeIcon: "./assets/android-icon-mark.png",
+  androidNotificationIcon: "./assets/android-notification-icon.png",
+  androidNotificationColor: "#7565C7",
+} as const;
+
 const RELEASE_ASSETS = {
-  appIcon: "./assets/splash-icon-prod.png",
-  iosIcon: "./assets/icon-composer-prod.icon",
-  splashIcon: "./assets/splash-icon-prod.png",
+  appIcon: fromRepoRoot(BRAND_ASSET_PATHS.productionIosIconPng),
+  iosIcon: fromRepoRoot(BRAND_ASSET_PATHS.productionIconComposerProject),
+  splashIcon: fromRepoRoot(BRAND_ASSET_PATHS.productionIosIconPng),
   androidAdaptiveForeground: "./assets/android-icon-mark.png",
   androidAdaptiveBackgroundColor: "#000000",
   androidMonochromeIcon: "./assets/android-icon-mark.png",
@@ -60,7 +74,7 @@ const VARIANT_CONFIG = {
     iosBundleIdentifier: "com.t3tools.t3code.preview",
     androidPackage: "com.t3tools.t3code.preview",
     relyingParty: "clerk.t3.codes",
-    assets: RELEASE_ASSETS,
+    assets: PREVIEW_ASSETS,
   },
   production: {
     appName: "T3 Code",

apps/mobile/src/components/BrandMark.tsx

@@ -1,13 +1,23 @@
-import { Image, View } from "react-native";
+import Constants from "expo-constants";
+import { Image } from "expo-image";
+import { View } from "react-native";
 
 import { AppText as Text } from "./AppText";
 
-const BRAND_MARK_SOURCE = require("../../../../assets/dev/blueprint-ios-1024.png");
+const appVariant = Constants.expoConfig?.extra?.appVariant;
+const BRAND_MARK_SOURCE =
+  appVariant === "development"
+    ? require("../../../../assets/dev/blueprint-ios-1024.png")
+    : appVariant === "preview"
+      ? require("../../../../assets/nightly/nightly-ios-1024.png")
+      : require("../../../../assets/prod/black-ios-1024.png");
+const DEFAULT_STAGE_LABEL =
+  appVariant === "development" ? "Dev" : appVariant === "preview" ? "Preview" : "Alpha";
 
 export function BrandMark(props: { readonly compact?: boolean; readonly stageLabel?: string }) {
   const compact = props.compact ?? false;
   const iconSize = compact ? 32 : 44;
-  const stageLabel = props.stageLabel ?? "Alpha";
+  const stageLabel = props.stageLabel ?? DEFAULT_STAGE_LABEL;
 
   return (
     <View className="flex-row items-center gap-3">

assets/README.md

@@ -0,0 +1,50 @@
+# Brand icons
+
+The three Icon Composer projects are the source of truth for full application icons:
+
+- `dev/app-icon.icon`
+- `nightly/app-icon.icon`
+- `prod/app-icon.icon`
+
+Each project uses `text.svg` for the T3 mark and `background.svg` when the background is a vector layer. Additional layers use semantic names that describe their role and placement.
+
+Run `vp run icons:export` from the repository root to regenerate the tracked iOS, Linux, Windows, and web assets. Run `vp run icons:check` to verify that those generated assets match their sources without changing files.
+
+Exporting requires Icon Composer 2 or newer on macOS. The script selects the newest compatible exporter from Xcode or a standalone Icon Composer installation and pins design generation 26. Set `ICON_COMPOSER_TOOL` to the full path of `Icon Composer.app/Contents/Executables/ictool` to override automatic discovery.
+
+## macOS exports
+
+Icon Composer's command-line exporter does not expose the `macOS pre-Tahoe` preset. A plain command-line `macOS` export is full bleed and is not suitable for the desktop app, so the export script intentionally leaves the tracked macOS PNGs unchanged and prints a reminder after every run.
+
+After changing an Icon Composer project, open it in Icon Composer and export the macOS PNG with exactly these settings:
+
+- Platform: `macOS pre-Tahoe`
+- Appearance: `Default`
+- Size: `1024pt`
+- Scale: `1×`
+
+Save the three exports to:
+
+- `dev/app-icon.icon` -> `dev/blueprint-macos-1024.png`
+- `nightly/app-icon.icon` -> `nightly/nightly-macos-1024.png`
+- `prod/app-icon.icon` -> `prod/black-macos-1024.png`
+
+The result must be a 1024×1024 PNG with the classic macOS safe area: the opaque icon body is 824×824, inset 100 pixels on every side, with only the native Icon Composer shadow extending into the surrounding transparent canvas.
+
+To have Codex perform the native exports, paste this prompt into a task opened at the repository root:
+
+```text
+Use [@Computer](plugin://computer-use@openai-bundled) and the Icon Composer app to export the three macOS app icons in this repository.
+
+For each project below, use Platform: macOS pre-Tahoe, Appearance: Default, Size: 1024pt, and Scale: 1×, then save the PNG to the exact destination:
+
+- assets/dev/app-icon.icon -> assets/dev/blueprint-macos-1024.png
+- assets/nightly/app-icon.icon -> assets/nightly/nightly-macos-1024.png
+- assets/prod/app-icon.icon -> assets/prod/black-macos-1024.png
+
+Do not resize, composite, or otherwise post-process the exported PNGs.
+
+Verify every result is 1024×1024 and has the classic macOS safe area: an 824×824 opaque body inset 100px on every side, with only Icon Composer's native shadow extending beyond it.
+```
+
+Do not edit the generated PNG or ICO files directly.

apps/mobile/assets/icon-composer-dev.icon/icon.json → assets/dev/app-icon.icon/icon.json

@@ -6,35 +6,40 @@
     {
       "layers": [
         {
-          "hidden": false,
-          "image-name": "gpt-image-1.5-jd70szmrd03p36z4zv48ycsbax81egvr.png",
-          "name": "gpt-image-1.5-jd70szmrd03p36z4zv48ycsbax81egvr",
+          "glass": true,
+          "image-name": "text.svg",
+          "name": "Text",
           "position": {
-            "scale": 1.1,
+            "scale": 8.5,
             "translation-in-points": [0, 0]
           }
         },
         {
-          "image-name": "T3.svg",
-          "name": "T3",
+          "glass": false,
+          "image-name": "annotations.svg",
+          "name": "Annotations",
           "position": {
-            "scale": 10,
+            "scale": 8.5,
             "translation-in-points": [0, 0]
           }
         },
         {
-          "hidden": true,
-          "image-name": "Texturelabs_Paper_381XL.jpg",
-          "name": "Texturelabs_Paper_381XL"
+          "glass": true,
+          "image-name": "background.svg",
+          "name": "Background",
+          "position": {
+            "scale": 8.1,
+            "translation-in-points": [0, 0]
+          }
         }
       ],
       "shadow": {
         "kind": "neutral",
-        "opacity": 0.5
+        "opacity": 0.6
       },
       "translucency": {
         "enabled": true,
-        "value": 0.5
+        "value": 0.2
       }
     }
   ],