@the-portland-company/shell 0.3.4 → 0.4.0

package/dist/index.d.cts

@@ -154,8 +154,15 @@ interface ShellModeValue {
     modes: ShellModeConfig[];
     /** Switch to a different mode. App owns side effects. */
     switchMode: (modeId: string) => void;
-    /** Returns the config for the current mode (convenience). */
-    getModeConfig: () => ShellModeConfig;
+    /**
+     * Optional convenience accessor for the current mode's config. If
+     * omitted, shell auto-derives it via `modes.find(m => m.id === currentMode)`.
+     * Avoid object-method syntax (`getModeConfig() { return this.modes[0] }`) —
+     * the function is destructured by shell internals and `this` will not be
+     * bound. Use a closure (`getModeConfig: () => modes[0]`) or just leave it
+     * unset and let shell resolve.
+     */
+    getModeConfig?: () => ShellModeConfig;
 }
 /** ---------------- Nav items ---------------- */
 /**

package/dist/index.d.ts

@@ -154,8 +154,15 @@ interface ShellModeValue {
     modes: ShellModeConfig[];
     /** Switch to a different mode. App owns side effects. */
     switchMode: (modeId: string) => void;
-    /** Returns the config for the current mode (convenience). */
-    getModeConfig: () => ShellModeConfig;
+    /**
+     * Optional convenience accessor for the current mode's config. If
+     * omitted, shell auto-derives it via `modes.find(m => m.id === currentMode)`.
+     * Avoid object-method syntax (`getModeConfig() { return this.modes[0] }`) —
+     * the function is destructured by shell internals and `this` will not be
+     * bound. Use a closure (`getModeConfig: () => modes[0]`) or just leave it
+     * unset and let shell resolve.
+     */
+    getModeConfig?: () => ShellModeConfig;
 }
 /** ---------------- Nav items ---------------- */
 /**

package/dist/index.js

@@ -8,22 +8,13 @@ import { keyframes } from '@emotion/react';
 
 // src/theme/index.ts
 
+// src/theme/tokens.generated.ts
+var brandRamp = { 50: "#FFF5F0", 100: "#FFE8DC", 200: "#FFD0B8", 300: "#FFB088", 400: "#FF8C5A", 500: "#E86A3A", 600: "#CC5429", 700: "#A6421F", 800: "#803317", 900: "#5C2410" };
+
 // src/theme/colors.ts
 var colors = {
-  // Primary brand color - Politogy Red/Orange (Energy & Action)
-  brand: {
-    50: "#fff5f0",
-    100: "#ffe8dc",
-    200: "#ffd0b8",
-    300: "#ffb088",
-    400: "#ff8c5a",
-    500: "#e86a3a",
-    // Primary brand color - burnt orange/red
-    600: "#cc5429",
-    700: "#a6421f",
-    800: "#803317",
-    900: "#5c2410"
-  },
+  // Primary brand color - Politogy burnt-orange (Energy & Action). From Specs.
+  brand: { ...brandRamp },
   // Politogy Brand Colors
   politogy: {
     // Legacy Blue - kept for reference
@@ -39,19 +30,8 @@ var colors = {
       800: "#2a4365",
       900: "#1a365d"
     },
-    // Primary Red/Orange - Energy & Action (main brand color)
-    red: {
-      50: "#fff5f0",
-      100: "#ffe8dc",
-      200: "#ffd0b8",
-      300: "#ffb088",
-      400: "#ff8c5a",
-      500: "#e86a3a",
-      600: "#cc5429",
-      700: "#a6421f",
-      800: "#803317",
-      900: "#5c2410"
-    },
+    // Primary Red/Orange - Energy & Action (main brand color). From Specs.
+    red: { ...brandRamp },
     // Navy - Professional & Authoritative
     navy: {
       50: "#e8eef6",
@@ -1269,6 +1249,20 @@ function getUserDisplayName(user) {
   if (!user) return "User";
   return user.profile?.full_name || user.profile?.name || user.user_metadata?.full_name || user.user_metadata?.name || (typeof user.email === "string" ? user.email.split("@")[0] : "") || user.email || "User";
 }
+
+// src/lib/resolveModeConfig.ts
+function resolveModeConfig(mode) {
+  if (!mode) return null;
+  const modes = mode.modes ?? [];
+  if (typeof mode.getModeConfig === "function") {
+    try {
+      const result = mode.getModeConfig();
+      if (result) return result;
+    } catch {
+    }
+  }
+  return modes.find((m) => m.id === mode.currentMode) ?? modes[0] ?? null;
+}
 function avatarUrlFromUser(user) {
   if (!user) return void 0;
   const meta = user.raw.user_metadata;
@@ -1293,7 +1287,7 @@ function UserMenu() {
   if (status !== "authenticated" || !user) return null;
   const displayName = getUserDisplayName(user.raw);
   const avatarUrl = userAvatarUrl ?? avatarUrlFromUser(user);
-  const modeConfig = mode?.getModeConfig() ?? null;
+  const modeConfig = resolveModeConfig(mode);
   const currentOrg = org?.currentOrg ?? null;
   const linkedAccounts = linked?.linkedAccounts ?? [];
   const activeRoleConfig = role?.activeRoleConfig ?? null;
@@ -1581,10 +1575,10 @@ function NavItem({
   const navigate = useNavigate();
   const mode = useShellMode();
   const currentMode = mode?.currentMode ?? null;
-  const modeConfig = mode?.getModeConfig() ?? null;
+  const modeConfig = resolveModeConfig(mode);
   const navPref = useShellNavigationPreference();
   const showSubMenu = navPref?.showSubMenu ?? true;
-  const navHoverGradient = currentMode === MODE_CAMPAIGN ? "linear-gradient(90deg, #F2C94C 0%, #E63946 100%)" : currentMode === MODE_PETITION ? "linear-gradient(90deg, #F2C94C 0%, #007BFF 100%)" : "linear-gradient(90deg, #007BFF 0%, #E63946 100%)";
+  const navHoverGradient = currentMode === MODE_CAMPAIGN ? "linear-gradient(90deg, #F2C94C 0%, #E63946 100%)" : currentMode === MODE_PETITION ? "linear-gradient(90deg, #F2C94C 0%, #007BFF 100%)" : "linear-gradient(90deg, #ea6a3a 0%, #E63946 100%)";
   const gradientSweepBefore = {
     content: '""',
     position: "absolute",
@@ -2128,8 +2122,8 @@ var OrgPill_default = OrgPill;
 function ModePill() {
   const mode = useShellMode();
   if (!mode) return null;
-  const { currentMode, modes, switchMode, getModeConfig } = mode;
-  const modeConfig = getModeConfig();
+  const { currentMode, modes, switchMode } = mode;
+  const modeConfig = resolveModeConfig(mode);
   if (!modeConfig) return null;
   const hasMultipleModes = modes.length > 1;
   const isDisabled = !hasMultipleModes;