@multiplatform.one/core 7.1.0 → 7.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/core",
-  "version": "7.1.0",
+  "version": "7.2.1",
   "description": "Core framework shell, provider composition, and layout factories for multiplatform.one",
   "keywords": [
     "app",
@@ -42,15 +42,16 @@
   },
   "dependencies": {
     "@tanstack/devtools-event-client": "^0.4.3",
+    "@tanstack/devtools-utils": "^0.4.0",
+    "@tanstack/pacer-devtools": "1.3.0",
     "@tanstack/react-devtools": "^0.10.2",
     "@tanstack/react-form-devtools": "0.2.22",
-    "@tanstack/react-pacer-devtools": "^0.7.0",
     "react-cookie": "^8.1.2",
-    "@multiplatform.one/i18n": "7.1.0",
-    "@multiplatform.one/logger": "7.1.0",
-    "@multiplatform.one/platform": "7.1.0",
-    "@multiplatform.one/store": "7.1.0",
-    "@multiplatform.one/theme": "7.1.0"
+    "@multiplatform.one/platform": "7.2.1",
+    "@multiplatform.one/store": "7.2.1",
+    "@multiplatform.one/theme": "7.2.1",
+    "@multiplatform.one/i18n": "7.2.1",
+    "@multiplatform.one/logger": "7.2.1"
   },
   "devDependencies": {
     "@sentry/react": "^10.51.0",
@@ -68,8 +69,8 @@
     "tamagui": "2.7.6",
     "typescript": "~5.9.3",
     "vitest": "^4.1.5",
-    "@multiplatform.one/frappe": "7.1.0",
-    "@multiplatform.one/web3": "7.1.0"
+    "@multiplatform.one/frappe": "7.2.1",
+    "@multiplatform.one/web3": "7.2.1"
   },
   "peerDependencies": {
     "@sentry/react": "^9.0.0",
@@ -85,10 +86,10 @@
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-safe-area-context": ">=4.0.0",
     "tamagui": "^2.0.0-rc",
-    "@multiplatform.one/frappe": "^7.1.0",
-    "@multiplatform.one/frappe-ui": "^7.1.0",
-    "@multiplatform.one/keycloak": "^7.1.0",
-    "@multiplatform.one/web3": "^7.1.0"
+    "@multiplatform.one/frappe": "^7.2.1",
+    "@multiplatform.one/web3": "^7.2.1",
+    "@multiplatform.one/frappe-ui": "^7.2.1",
+    "@multiplatform.one/keycloak": "^7.2.1"
   },
   "peerDependenciesMeta": {
     "@multiplatform.one/web3": {

package/src/app/CreateApp.tsx

@@ -52,6 +52,15 @@ export function followPageOriginForLoopback(configured: string): string {
 export interface TanstackConfig {
   /** Show React Query devtools (web only, ignored on native and in Storybook). */
   debug?: boolean;
+  /**
+   * Shake the device to open the devtools shell (web only; requires
+   * `debug`). Defaults to true whenever the devtools mount. On iOS 13+
+   * WebKit the motion permission is requested once from the user's first
+   * tap; Android and desktop need no permission (desktop simply never
+   * fires devicemotion — use Cmd/Ctrl+Shift+` there). Set false to
+   * keep the keyboard shortcut as the only trigger.
+   */
+  shakeToOpen?: boolean;
   /** Options forwarded to the QueryClient constructor. */
   queryClientOptions?: Record<string, unknown>;
   /**
@@ -70,6 +79,22 @@ export interface TanstackConfig {
    * Passed automatically by `createApp()` from the theme config.
    */
   tamaguiConfig?: unknown;
+  /**
+   * Theme COLOR names the devtools panel offers in its accent dropdown
+   * (e.g. `["", "blue", "green", "purple"]`; `""` is the base theme).
+   * The panel renders the dropdown only when this AND `onThemeColorChange`
+   * are both set, and only then does the panel's Randomize action touch the
+   * accent — otherwise the picker is inert.
+   */
+  themeColors?: string[];
+  /** The theme color the app currently has applied (`""` for the base). */
+  currentThemeColor?: string;
+  /**
+   * Apply a theme color the user picked. The app owns this because a theme
+   * color is app state, not devtools state: the panel changes nothing on its
+   * own, it hands the choice back.
+   */
+  onThemeColorChange?: (color: string) => void;
 }
 
 export interface KeycloakConfig {

package/src/app/TanstackDevtools.tsx

@@ -1,15 +1,36 @@
 import React from "react";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+// The `/production` subpaths carry the same implementations the main
+// entries carry in development, but WITHOUT the NODE_ENV !== "development"
+// no-op stubs the main entries dead-code themselves into in a production
+// build. This whole file is lazy-loaded and gated on `tanstackConfig.debug`,
+// so importing the real panels unconditionally is what lets a deployed
+// build that opts in (debug: true) actually show devtools.
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools/production";
 import { TanStackDevtools } from "@tanstack/react-devtools";
-import { formDevtoolsPlugin } from "@tanstack/react-form-devtools";
-import { pacerDevtoolsPlugin } from "@tanstack/react-pacer-devtools";
+import { formDevtoolsPlugin } from "@tanstack/react-form-devtools/production";
+import { createReactPanel, createReactPlugin } from "@tanstack/devtools-utils/react";
+import { PacerDevtoolsCore } from "@tanstack/pacer-devtools/production";
 import { ThemeDevtoolsPanel } from "@multiplatform.one/theme";
 import { storage } from "@multiplatform.one/store";
 import { useEffect, useState } from "react";
 import type { TanstackConfig } from "./CreateApp";
+import { devtoolsOpenHotkey, useDevtoolsKeyboardTrigger, useShakeToOpen } from "./devtoolsTrigger";
 
 const devtoolsSettingsKey = "tanstack_devtools_settings";
 
+// @tanstack/react-pacer-devtools' /production entry is broken upstream
+// (0.7.x): it re-exports its panel from ReactPacerDevtools.js, which pulls
+// PacerDevtoolsCore from @tanstack/pacer-devtools' MAIN entry — the
+// NODE_ENV-gated one — so its "production" plugin silently mounts the no-op
+// core in a deployed bundle. Rebuild the plugin from the genuinely ungated
+// /production core instead. devtoolsTrigger.spec.ts pins the resolved core
+// as real (its unmount throws; the NoOp's is silent).
+const [PacerDevtoolsPanel] = createReactPanel(PacerDevtoolsCore);
+const [pacerDevtoolsPlugin] = createReactPlugin({
+  name: "TanStack Pacer",
+  Component: PacerDevtoolsPanel,
+});
+
 /**
  * Sync the resolved color scheme into the TanStack Devtools settings
  * stored via the shared storage adapter. The devtools shell reads this on mount and
@@ -36,7 +57,7 @@ export interface TanstackDevtoolsProps {
 /**
  * Lazily-loaded devtools shell. All heavy devtools dependencies
  * (`@tanstack/react-devtools`, `@tanstack/react-query-devtools`,
- * `@tanstack/react-form-devtools`, `@tanstack/react-pacer-devtools`,
+ * `@tanstack/react-form-devtools`, `@tanstack/pacer-devtools`,
  * and `ThemeDevtoolsPanel`) live here so they are code-split away
  * from the production bundle.
  */
@@ -108,6 +129,14 @@ export default function TanstackDevtoolsWrapper({
 
   const frappePlugin = useFrappePlugin();
 
+  // Shake-to-open (devicemotion) — the phone-friendly counterpart to the
+  // keyboard shortcut. Ships whenever the devtools mount unless the app
+  // opts out with `tanstack: { shakeToOpen: false }`.
+  useShakeToOpen(tanstackConfig.shakeToOpen !== false);
+  // Cmd/Ctrl+Shift+` — capture-phase so apps cannot swallow it. TanStack
+  // still receives openHotkey (US-layout e.key sequence) as a fallback.
+  useDevtoolsKeyboardTrigger(true);
+
   const plugins = [
     {
       id: "react-query",
@@ -119,11 +148,29 @@ export default function TanstackDevtoolsWrapper({
     {
       id: "theme",
       name: "Theme",
+      // The panel opens focused on Theme, so a shake (or the hotkey) lands
+      // straight on the theme flipper — the whole point of the trigger is
+      // to check that everything is themable. `defaultOpen` seeds the tab
+      // only on first open, when no layout is persisted yet; once the user
+      // moves to another tab their choice is restored on later opens.
+      defaultOpen: true,
       render: (_el: HTMLElement, props: { theme: "dark" | "light" }) => (
         <ThemeDevtoolsPanel
           useUserScheme={tanstackConfig.useUserScheme}
           devtoolsTheme={props.theme}
           tamaguiConfig={tanstackConfig.tamaguiConfig}
+          // The accent channel. `ThemeDevtoolsPanel` has taken these three
+          // props all along and core passed none of them, so the panel's
+          // accent dropdown never rendered and its Randomize action skipped
+          // the colour — a control that is present in the component and
+          // unreachable through the only wrapper that mounts it. They are
+          // forwarded, not invented here: a theme colour is app state, so the
+          // app supplies the list, the current value and the setter, exactly
+          // as it already supplies `useUserScheme`. Undefined stays undefined,
+          // so an app that wires nothing sees the panel it sees today.
+          themeColors={tanstackConfig.themeColors}
+          currentThemeColor={tanstackConfig.currentThemeColor}
+          onThemeColorChange={tanstackConfig.onThemeColorChange}
         />
       ),
     },
@@ -136,7 +183,7 @@ export default function TanstackDevtoolsWrapper({
       config={{
         defaultOpen: false,
         triggerHidden: true,
-        openHotkey: ["CtrlOrMeta", "`"],
+        openHotkey: [...devtoolsOpenHotkey],
         theme: resolvedScheme,
       }}
       plugins={plugins}