npm - @mastra/playground-ui - Versions diffs - 24.0.0-alpha.3 → 24.0.0-alpha.4 - Mend

@mastra/playground-ui 24.0.0-alpha.3 → 24.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/CHANGELOG.md +18 -0
package/dist/index.cjs.js +207 -34
package/dist/index.cjs.js.map +1 -1
package/dist/index.css +34 -0
package/dist/index.es.js +207 -36
package/dist/index.es.js.map +1 -1
package/dist/src/ds/components/ThemeProvider/index.d.ts +2 -0
package/dist/src/ds/components/ThemeProvider/storage-adapter.d.ts +7 -0
package/dist/src/ds/components/ThemeProvider/theme-context.d.ts +9 -0
package/dist/src/ds/components/ThemeProvider/theme-provider.d.ts +9 -0
package/dist/src/ds/components/ThemeProvider/theme-provider.stories.d.ts +7 -0
package/dist/src/ds/components/ThemeToggle/index.d.ts +2 -0
package/dist/src/ds/components/ThemeToggle/theme-toggle.d.ts +21 -0
package/dist/src/ds/components/ThemeToggle/theme-toggle.stories.d.ts +7 -0
package/dist/src/index.d.ts +3 -1
package/dist/src/store/playground-store.d.ts +0 -9
package/package.json +6 -6

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,23 @@
 # @mastra/playground-ui
+## 24.0.0-alpha.4
+### Minor Changes
+- Added shared `ThemeProvider`, `useTheme`, and `ThemeToggle` to unify theme management. ([#15838](https://github.com/mastra-ai/mastra/pull/15838))
+  **Added**
+  - `ThemeProvider` applies the resolved theme class to `<html>` and persists the choice under the shared `mastra-theme` localStorage key, with a one-time migration from previously stored preferences.
+  - `useTheme()` works without a `<ThemeProvider>` ancestor: it returns a read-only fallback that tracks the OS color scheme and exposes a no-op `setTheme`, so theme-aware leaf components (e.g. `CodeDiff`, `CodeEditor`) keep working when embedded standalone.
+  - `ThemeToggle` renders a system/light/dark pill and supports both controlled and uncontrolled usage.
+### Patch Changes
+- Updated dependencies [[`8a71261`](https://github.com/mastra-ai/mastra/commit/8a71261e3954ae617c6f8e25767b951f99438ab2), [`021a60f`](https://github.com/mastra-ai/mastra/commit/021a60f1f3e0135a70ef23c58be7a9b3aaffe6b4)]:
+  - @mastra/core@1.29.0-alpha.4
+  - @mastra/client-js@1.15.0-alpha.4
+  - @mastra/react@0.2.30-alpha.4
 ## 24.0.0-alpha.3
 ### Patch Changes

package/dist/index.cjs.js CHANGED Viewed

@@ -18,8 +18,6 @@ const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
 const ReactCodeMirror = require('@uiw/react-codemirror');
 const autocomplete = require('@codemirror/autocomplete');
 const sonner = require('sonner');
-const zustand = require('zustand');
-const middleware = require('zustand/middleware');
 const react = require('@mastra/react');
 const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const CheckboxPrimitive = require('@radix-ui/react-checkbox');
@@ -50,6 +48,8 @@ const isToday = require('date-fns/isToday');
 const search = require('@codemirror/search');
 const recharts = require('recharts');
 const reactResizablePanels = require('react-resizable-panels');
+const zustand = require('zustand');
+const middleware = require('zustand/middleware');
 const reactQuery = require('@tanstack/react-query');
 const observability = require('@mastra/core/observability');
@@ -5180,33 +5180,117 @@ function CopyButton({
   ] });
 }
-const usePlaygroundStore = zustand.create()(
-  middleware.persist(
-    (set) => ({
-      requestContext: {},
-      theme: "dark",
-      setRequestContext: (requestContext) => set({ requestContext }),
-      setTheme: (theme) => set({ theme })
-    }),
-    {
-      name: "mastra-playground-store"
+const DEFAULT_KEY = "mastra-theme";
+const LEGACY_ZUSTAND_KEY = "mastra-playground-store";
+const isTheme = (value) => value === "dark" || value === "light" || value === "system";
+const readLegacyZustand = (storage) => {
+  try {
+    const raw = storage.getItem(LEGACY_ZUSTAND_KEY);
+    if (!raw) return void 0;
+    const parsed = JSON.parse(raw);
+    const theme = parsed?.state?.theme;
+    return isTheme(theme) ? theme : void 0;
+  } catch {
+    return void 0;
+  }
+};
+const createLocalStorageAdapter = (key = DEFAULT_KEY) => ({
+  get() {
+    if (typeof window === "undefined") return null;
+    try {
+      const raw = window.localStorage.getItem(key);
+      if (isTheme(raw)) return raw;
+      const migrated = readLegacyZustand(window.localStorage);
+      if (migrated) {
+        window.localStorage.setItem(key, migrated);
+        return migrated;
+      }
+      return null;
+    } catch {
+      return null;
     }
-  )
-);
-const darkQuery = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
-function subscribeToColorScheme(callback) {
-  darkQuery?.addEventListener("change", callback);
-  return () => darkQuery?.removeEventListener("change", callback);
-}
-function getSystemIsDark() {
-  return darkQuery?.matches ?? true;
-}
-function useIsDarkMode() {
-  const storeTheme = usePlaygroundStore((s) => s.theme);
-  const systemIsDark = React.useSyncExternalStore(subscribeToColorScheme, getSystemIsDark, () => true);
-  if (storeTheme === "system") return systemIsDark;
-  return storeTheme === "dark";
-}
+  },
+  set(value) {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(key, value);
+    } catch {
+    }
+  },
+  subscribe(listener) {
+    if (typeof window === "undefined") return () => {
+    };
+    const handler = (event) => {
+      if (event.key !== key) return;
+      if (event.newValue === null) {
+        listener(null);
+        return;
+      }
+      if (isTheme(event.newValue)) listener(event.newValue);
+    };
+    window.addEventListener("storage", handler);
+    return () => window.removeEventListener("storage", handler);
+  }
+});
+const ThemeContext = React.createContext(null);
+const SYSTEM_QUERY = "(prefers-color-scheme: dark)";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+const getSystemTheme = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "dark";
+  return window.matchMedia(SYSTEM_QUERY).matches ? "dark" : "light";
+};
+const subscribeSystemTheme = (callback) => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+  };
+  const query = window.matchMedia(SYSTEM_QUERY);
+  query.addEventListener("change", callback);
+  return () => query.removeEventListener("change", callback);
+};
+const applyThemeClass = (target, resolved) => {
+  target.classList.remove(resolved === "dark" ? "light" : "dark");
+  target.classList.add(resolved);
+};
+const ThemeProvider = ({ children, defaultTheme = "system", storageKey, target }) => {
+  const adapter = React.useMemo(() => createLocalStorageAdapter(storageKey), [storageKey]);
+  const previousTargetRef = React.useRef(null);
+  const [theme, setThemeState] = React.useState(() => adapter.get() ?? defaultTheme);
+  const systemTheme = React.useSyncExternalStore(subscribeSystemTheme, getSystemTheme, () => "dark");
+  React.useEffect(() => adapter.subscribe((next) => setThemeState(next ?? defaultTheme)), [adapter, defaultTheme]);
+  const resolvedTheme = theme === "system" ? systemTheme : theme;
+  useIsomorphicLayoutEffect(() => {
+    const el = target ?? (typeof window === "undefined" ? null : window.document.documentElement);
+    if (previousTargetRef.current && previousTargetRef.current !== el) {
+      previousTargetRef.current.classList.remove("dark", "light");
+    }
+    if (el) applyThemeClass(el, resolvedTheme);
+    previousTargetRef.current = el;
+  }, [resolvedTheme, target]);
+  const value = React.useMemo(
+    () => ({
+      theme,
+      resolvedTheme,
+      systemTheme,
+      setTheme: (next) => {
+        setThemeState(next);
+        adapter.set(next);
+      }
+    }),
+    [theme, resolvedTheme, systemTheme, adapter]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
+};
+const noop = () => {
+};
+const useTheme = () => {
+  const ctx = React.useContext(ThemeContext);
+  const systemTheme = React.useSyncExternalStore(subscribeSystemTheme, getSystemTheme, () => "dark");
+  return React.useMemo(
+    () => ctx ?? { theme: "system", resolvedTheme: systemTheme, systemTheme, setTheme: noop },
+    [ctx, systemTheme]
+  );
+};
 function buildDarkTheme$2() {
   const baseTheme = codemirrorThemeDracula.draculaInit({
@@ -5397,7 +5481,7 @@ function buildLightTheme$2() {
   return [editorTheme, language.syntaxHighlighting(highlightStyle)];
 }
 const useCodemirrorTheme$3 = () => {
-  const isDark = useIsDarkMode();
+  const isDark = useTheme().resolvedTheme === "dark";
   return React.useMemo(() => isDark ? buildDarkTheme$2() : buildLightTheme$2(), [isDark]);
 };
 const CodeEditor = React.forwardRef(
@@ -8408,6 +8492,81 @@ const Switch = React__namespace.forwardRef(({ className, ...props }, ref) => /*
 ));
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
+const DEFAULT_OPTIONS = [
+  { value: "system", label: "System", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, {}) },
+  { value: "light", label: "Light", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, {}) },
+  { value: "dark", label: "Dark", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, {}) }
+];
+const ITEM_WIDTH = 28;
+const ITEM_GAP = 2;
+const ThemeToggle = ({
+  value,
+  onChange,
+  options = DEFAULT_OPTIONS,
+  className,
+  "aria-label": ariaLabel = "Theme",
+  ...rest
+}) => {
+  const { theme, setTheme } = useTheme();
+  const current = value ?? theme;
+  const commit = onChange ?? setTheme;
+  const effectiveCurrent = options.some((option) => option.value === current) ? current : options[0]?.value ?? "system";
+  const handleChange = (next) => {
+    const match = options.find((opt) => opt.value === next);
+    if (match) commit(match.value);
+  };
+  const activeIndex = Math.max(
+    0,
+    options.findIndex((option) => option.value === effectiveCurrent)
+  );
+  const indicatorOffset = activeIndex * (ITEM_WIDTH + ITEM_GAP);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    RadioGroupPrimitive__namespace.Root,
+    {
+      ...rest,
+      value: effectiveCurrent,
+      onValueChange: handleChange,
+      orientation: "horizontal",
+      "aria-label": ariaLabel,
+      className: cn(
+        "relative inline-flex w-fit items-center gap-0.5 rounded-full border border-border1 bg-surface3 p-0.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-surface5 motion-reduce:transition-none",
+              transitions.transform
+            ),
+            style: { width: ITEM_WIDTH, transform: `translateX(${indicatorOffset}px)` }
+          }
+        ),
+        options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          RadioGroupPrimitive__namespace.Item,
+          {
+            value: option.value,
+            "aria-label": option.label,
+            style: { width: ITEM_WIDTH },
+            className: cn(
+              "relative inline-flex h-6 cursor-pointer items-center justify-center rounded-full",
+              "[&_svg]:size-3.5 text-icon3 hover:text-icon6 data-[state=checked]:text-icon6",
+              "focus-visible:outline-hidden",
+              "active:scale-90 motion-reduce:transition-none",
+              transitions.colors,
+              transitions.transform
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "pointer-events-none inline-flex items-center justify-center", children: option.icon })
+          },
+          option.value
+        ))
+      ]
+    }
+  );
+};
 function Truncate({
   children,
   untilChar,
@@ -10295,7 +10454,7 @@ function buildSideDialogLightTheme() {
   return [editorTheme, language.syntaxHighlighting(highlightStyle)];
 }
 const useCodemirrorTheme$2 = () => {
-  const isDark = useIsDarkMode();
+  const isDark = useTheme().resolvedTheme === "dark";
   return React.useMemo(() => isDark ? buildSideDialogDarkTheme() : buildSideDialogLightTheme(), [isDark]);
 };
 function SideDialogCodeSection({ codeStr = "", title, icon, simplified = false }) {
@@ -10935,7 +11094,7 @@ function buildDiffLightTheme() {
 function CodeDiff({ codeA, codeB }) {
   const containerRef = React.useRef(null);
   const viewRef = React.useRef(null);
-  const isDark = useIsDarkMode();
+  const isDark = useTheme().resolvedTheme === "dark";
   const theme = React.useMemo(() => isDark ? buildDiffDarkTheme() : buildDiffLightTheme(), [isDark]);
   React.useEffect(() => {
     if (!containerRef.current) return;
@@ -12925,7 +13084,7 @@ function buildLightTheme$1() {
   return [editorTheme, language.syntaxHighlighting(highlightStyle)];
 }
 const useCodemirrorTheme$1 = () => {
-  const isDark = useIsDarkMode();
+  const isDark = useTheme().resolvedTheme === "dark";
   return React.useMemo(() => isDark ? buildDarkTheme$1() : buildLightTheme$1(), [isDark]);
 };
 function DataCodeSection({
@@ -13240,7 +13399,7 @@ function buildLightTheme() {
   return [editorTheme, language.syntaxHighlighting(highlightStyle)];
 }
 const useCodemirrorTheme = () => {
-  const isDark = useIsDarkMode();
+  const isDark = useTheme().resolvedTheme === "dark";
   return React.useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
 };
 function DataDetailsPanelCodeSection({
@@ -15006,6 +15165,18 @@ function generateDefaultValues(schema) {
   return generateObjectDefaults(schema.properties, 0);
 }
+const usePlaygroundStore = zustand.create()(
+  middleware.persist(
+    (set) => ({
+      requestContext: {},
+      setRequestContext: (requestContext) => set({ requestContext })
+    }),
+    {
+      name: "mastra-playground-store"
+    }
+  )
+);
 const DATE_PRESETS = [
   { label: "Last 24 hours", value: "24h" },
   { label: "Last 3 days", value: "3d" },
@@ -19447,6 +19618,8 @@ exports.TextFieldBlock = TextFieldBlock;
 exports.Textarea = Textarea;
 exports.Th = Th;
 exports.Thead = Thead;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeToggle = ThemeToggle;
 exports.ThreadDeleteButton = ThreadDeleteButton;
 exports.ThreadItem = ThreadItem;
 exports.ThreadLink = ThreadLink;
@@ -19582,7 +19755,6 @@ exports.useCopyToClipboard = useCopyToClipboard;
 exports.useEntityNames = useEntityNames;
 exports.useEnvironments = useEnvironments;
 exports.useInView = useInView;
-exports.useIsDarkMode = useIsDarkMode;
 exports.useJSONSchemaForm = useJSONSchemaForm;
 exports.useJSONSchemaFormField = useJSONSchemaFormField;
 exports.useJSONSchemaFormNestedContext = useJSONSchemaFormNestedContext;
@@ -19603,6 +19775,7 @@ exports.useServiceNames = useServiceNames;
 exports.useSpanDetail = useSpanDetail;
 exports.useTableKeyboardNavigation = useTableKeyboardNavigation;
 exports.useTags = useTags;
+exports.useTheme = useTheme;
 exports.useTokenUsageByAgentMetrics = useTokenUsageByAgentMetrics;
 exports.useTotalTokensKpiMetrics = useTotalTokensKpiMetrics;
 exports.useTraceFilterPersistence = useTraceFilterPersistence;