@multiplatform.one/storybook 7.34.3 → 7.35.0

package/dist/cjs/CreatePreview.cjs

@@ -65,11 +65,6 @@ const knobOptions = {
   cornerSmoothing: Object.values(import_theme.CornerSmoothing),
   borderWidth: Object.values(import_theme.BorderWidth),
   elevation: Object.values(import_theme.Elevation),
-  space: Object.values(import_theme.Space),
-  size: Object.values(import_theme.Size),
-  // LC-76 TWO-AXES: density is its own dial (compact steps space only), so
-  // the size × density matrix is sweepable from the toolbar / URL globals.
-  density: Object.values(import_theme.Density),
   textAccent: Object.values(import_theme.TextAccent),
   headingFont: Object.values(import_theme.HeadingFont),
   bodyFont: Object.values(import_theme.BodyFont),
@@ -77,7 +72,7 @@ const knobOptions = {
   // D-11 hero-H1 dial: the page-title step is sweepable so the VERIFY probes
   // (and humans) can flip moderate/display from the toolbar or URL globals.
   pageTitleScale: Object.values(import_theme.PageTitleScale),
-  animation: ["none", ...import_theme.animationNames],
+  animation: ["none", ...import_theme.motionStops],
   // LC-40 DISABLED-VISIBLE: the disabled-treatment dial is sweepable so the
   // VERIFY probes (and humans) can flip keepLabel/dimWhole from the toolbar
   // or via URL globals.
@@ -85,7 +80,7 @@ const knobOptions = {
   // K4: the one house knob a table sweep has to flip (MPO-132).
   tableZebra: Object.values(import_theme.TableZebra)
 };
-const stateKnobFields = ["fillStyle", "borderRadius", "borderWidth", "elevation", "space", "size", "textAccent", "headingFont", "bodyFont", "fontWeight"];
+const stateKnobFields = ["fillStyle", "borderRadius", "borderWidth", "elevation", "textAccent", "headingFont", "bodyFont", "fontWeight"];
 function parseValue(value) {
   if (typeof value !== "string") return value;
   try {
@@ -150,7 +145,7 @@ function AnimationNamesEmitter() {
   (0, import_react.useEffect)(() => {
     if (emittedRef.current) return;
     emittedRef.current = true;
-    getChannelEmit()?.(animationNamesChannelEvent, import_theme.animationNames);
+    getChannelEmit()?.(animationNamesChannelEvent, [...import_theme.motionStops]);
   }, []);
   return null;
 }
@@ -416,6 +411,15 @@ function createPreview(options) {
     // Publish registered preset names so the manager-side ThemePanel can
     // render a preset selector without importing the theme package.
     __presetNames: (0, import_theme.getPresetNames)(),
+    // Each preset's token scale (control / type px), so the picker can say
+    // what a switch does to sizes and spacing.
+    __presetScales: Object.fromEntries((0, import_theme.getPresetNames)().map(name => {
+      const scale = (0, import_theme.getPreset)(name)?.scale ?? import_theme.defaultScaleInputs;
+      return [name, {
+        control: scale.control,
+        type: scale.type
+      }];
+    })),
     // Publish available theme color names so the ThemePanel can show only
     // colors that actually have registered Tamagui sub-themes.
     __themeColors: themeColorNames,
@@ -438,7 +442,11 @@ function createPreview(options) {
   globalThis.__MPO_THEME_AXES__ = {
     schemes: ["light", "dark"],
     themeColors: themeColorNames,
-    presets: ["", ...(0, import_theme.getPresetNames)()]
+    presets: ["", ...(0, import_theme.getPresetNames)()],
+    presetThemes: Object.fromEntries((0, import_theme.getPresetNames)().flatMap(name => {
+      const theme = (0, import_theme.getPreset)(name)?.theme;
+      return theme ? [[name, theme]] : [];
+    }))
   };
   const defaultParameters = {
     actions: {
@@ -508,10 +516,13 @@ function createPreview(options) {
     }, [schemeGlobal]);
     const colorGlobal = context.globals.color || "";
     const requestedThemeConfig = context.globals.tamaguiConfig;
-    const themeConfigName = useActiveThemeConfigName(requestedThemeConfig && themeConfigNames.includes(requestedThemeConfig) ? requestedThemeConfig : defaultThemeConfigName);
+    const requestedThemeConfigName = requestedThemeConfig && themeConfigNames.includes(requestedThemeConfig) ? requestedThemeConfig : defaultThemeConfigName;
+    const themeConfigName = useActiveThemeConfigName(requestedThemeConfigName);
     const storyThemeParams = context.parameters?.theme;
-    const activePresetName = context.globals.preset;
+    const activePresetName = context.globals.preset || void 0;
     const activePreset = activePresetName ? (0, import_theme.getPreset)(activePresetName) : void 0;
+    const presetTheme = colorGlobal || activePreset?.theme || import_theme.defaultPreset.theme;
+    const scaleId = (0, import_theme.useActiveScale)(themeConfigsByName[requestedThemeConfigName], activePresetName);
     const knobUpdate = (0, import_react.useMemo)(() => {
       const result = {};
       const stateKeys = /* @__PURE__ */new Set(["hover", "press", "focus", "focusVisible"]);
@@ -527,6 +538,7 @@ function createPreview(options) {
           result[key] = import_theme.defaultKnobs[key];
         }
       }
+      result.animation = (0, import_theme.normalizeAnimationKnob)(result.animation) ?? import_theme.defaultKnobs.animation;
       for (const state of stateKeys) {
         const stateObj = {};
         let hasValues = false;
@@ -553,17 +565,19 @@ function createPreview(options) {
     const presetCtxValue = (0, import_react.useMemo)(() => ({
       preset: {
         ...import_theme.defaultPreset,
-        theme: colorGlobal || import_theme.defaultPreset.theme,
+        theme: presetTheme,
         knobs: {
           ...import_theme.defaultKnobs,
           ...knobUpdate
         }
       },
-      overrides: void 0
-    }), [knobUpdate, colorGlobal]);
+      overrides: void 0,
+      presetName: activePresetName,
+      scaleId
+    }), [knobUpdate, presetTheme, activePresetName, scaleId]);
     const animationValue = presetCtxValue.preset.knobs.animation;
     (0, import_react.useEffect)(() => {
-      const ms = animationValue === "none" ? "0ms" : animationValue === "quick" ? "100ms" : animationValue === "medium" ? "200ms" : animationValue === "slow" || animationValue === "lazy" ? "350ms" : animationValue === "bouncy" ? "300ms" : "200ms";
+      const ms = `${animationValue === "none" ? 0 : import_theme.animationDurations[animationValue]}ms`;
       document.documentElement.style.setProperty("--mp-transition", ms);
     }, [animationValue]);
     const storyContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(CanvasBackground, {
@@ -578,15 +592,15 @@ function createPreview(options) {
         themeConfig: themeConfigsByName[themeConfigName],
         systemTheme: resolvedScheme,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimationNamesEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(FrappeDebugEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(BaseThemeColorEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
-          name: colorGlobal || resolvedScheme,
+          name: presetTheme || resolvedScheme,
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ThemeColorEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
             event: accentColorsChannelEvent,
             prefix: "accent"
           }), storyContent]
         }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
           name: oppositeScheme,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(OppositeThemeColorEmitter, {}), colorGlobal ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
-            name: colorGlobal,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(OppositeThemeColorEmitter, {}), presetTheme ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
+            name: presetTheme,
             children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
               event: baseOppositeChannelEvent
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
@@ -602,7 +616,7 @@ function createPreview(options) {
             })]
           })]
         })]
-      }, themeConfigName)
+      }, `${themeConfigName}:${scaleId}`)
     });
   }
   const frameworkDecorator = (Story, context) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_cookie.CookiesProvider, {

package/dist/cjs/CreatePreview.native.js

@@ -72,11 +72,6 @@ var knobOptions = {
   cornerSmoothing: Object.values(import_theme.CornerSmoothing),
   borderWidth: Object.values(import_theme.BorderWidth),
   elevation: Object.values(import_theme.Elevation),
-  space: Object.values(import_theme.Space),
-  size: Object.values(import_theme.Size),
-  // LC-76 TWO-AXES: density is its own dial (compact steps space only), so
-  // the size × density matrix is sweepable from the toolbar / URL globals.
-  density: Object.values(import_theme.Density),
   textAccent: Object.values(import_theme.TextAccent),
   headingFont: Object.values(import_theme.HeadingFont),
   bodyFont: Object.values(import_theme.BodyFont),
@@ -84,7 +79,7 @@ var knobOptions = {
   // D-11 hero-H1 dial: the page-title step is sweepable so the VERIFY probes
   // (and humans) can flip moderate/display from the toolbar or URL globals.
   pageTitleScale: Object.values(import_theme.PageTitleScale),
-  animation: ["none", ...import_theme.animationNames],
+  animation: ["none", ...import_theme.motionStops],
   // LC-40 DISABLED-VISIBLE: the disabled-treatment dial is sweepable so the
   // VERIFY probes (and humans) can flip keepLabel/dimWhole from the toolbar
   // or via URL globals.
@@ -92,7 +87,7 @@ var knobOptions = {
   // K4: the one house knob a table sweep has to flip (MPO-132).
   tableZebra: Object.values(import_theme.TableZebra)
 };
-var stateKnobFields = ["fillStyle", "borderRadius", "borderWidth", "elevation", "space", "size", "textAccent", "headingFont", "bodyFont", "fontWeight"];
+var stateKnobFields = ["fillStyle", "borderRadius", "borderWidth", "elevation", "textAccent", "headingFont", "bodyFont", "fontWeight"];
 function parseValue(value) {
   if (typeof value !== "string") return value;
   try {
@@ -175,7 +170,7 @@ function AnimationNamesEmitter() {
     var _getChannelEmit;
     if (emittedRef.current) return;
     emittedRef.current = true;
-    (_getChannelEmit = getChannelEmit()) === null || _getChannelEmit === void 0 ? void 0 : _getChannelEmit(animationNamesChannelEvent, import_theme.animationNames);
+    (_getChannelEmit = getChannelEmit()) === null || _getChannelEmit === void 0 ? void 0 : _getChannelEmit(animationNamesChannelEvent, [...import_theme.motionStops]);
   }, []);
   return null;
 }
@@ -536,6 +531,17 @@ function createPreview(options) {
     // Publish registered preset names so the manager-side ThemePanel can
     // render a preset selector without importing the theme package.
     __presetNames: (0, import_theme.getPresetNames)(),
+    // Each preset's token scale (control / type px), so the picker can say
+    // what a switch does to sizes and spacing.
+    __presetScales: Object.fromEntries((0, import_theme.getPresetNames)().map(function (name2) {
+      var _ref;
+      var _getPreset;
+      var scale = (_ref = (_getPreset = (0, import_theme.getPreset)(name2)) === null || _getPreset === void 0 ? void 0 : _getPreset.scale) !== null && _ref !== void 0 ? _ref : import_theme.defaultScaleInputs;
+      return [name2, {
+        control: scale.control,
+        type: scale.type
+      }];
+    })),
     // Publish available theme color names so the ThemePanel can show only
     // colors that actually have registered Tamagui sub-themes.
     __themeColors: themeColorNames,
@@ -597,7 +603,12 @@ function createPreview(options) {
   globalThis.__MPO_THEME_AXES__ = {
     schemes: ["light", "dark"],
     themeColors: themeColorNames,
-    presets: ["", ...(0, import_theme.getPresetNames)()]
+    presets: ["", ...(0, import_theme.getPresetNames)()],
+    presetThemes: Object.fromEntries((0, import_theme.getPresetNames)().flatMap(function (name2) {
+      var _getPreset;
+      var theme2 = (_getPreset = (0, import_theme.getPreset)(name2)) === null || _getPreset === void 0 ? void 0 : _getPreset.theme;
+      return theme2 ? [[name2, theme2]] : [];
+    }))
   };
   var defaultParameters = {
     actions: {
@@ -673,11 +684,15 @@ function createPreview(options) {
     }, [schemeGlobal]);
     var colorGlobal = context.globals.color || "";
     var requestedThemeConfig = context.globals.tamaguiConfig;
-    var themeConfigName = useActiveThemeConfigName(requestedThemeConfig && themeConfigNames.includes(requestedThemeConfig) ? requestedThemeConfig : defaultThemeConfigName);
+    var requestedThemeConfigName = requestedThemeConfig && themeConfigNames.includes(requestedThemeConfig) ? requestedThemeConfig : defaultThemeConfigName;
+    var themeConfigName = useActiveThemeConfigName(requestedThemeConfigName);
     var storyThemeParams = (_context_parameters = context.parameters) === null || _context_parameters === void 0 ? void 0 : _context_parameters.theme;
-    var activePresetName = context.globals.preset;
+    var activePresetName = context.globals.preset || void 0;
     var activePreset = activePresetName ? (0, import_theme.getPreset)(activePresetName) : void 0;
+    var presetTheme = colorGlobal || (activePreset === null || activePreset === void 0 ? void 0 : activePreset.theme) || import_theme.defaultPreset.theme;
+    var scaleId = (0, import_theme.useActiveScale)(themeConfigsByName[requestedThemeConfigName], activePresetName);
     var knobUpdate = (0, import_react.useMemo)(function () {
+      var _normalizeAnimationKnob;
       var result = {};
       var stateKeys = /* @__PURE__ */new Set(["hover", "press", "focus", "focusVisible"]);
       var _iteratorNormalCompletion5 = true,
@@ -711,6 +726,7 @@ function createPreview(options) {
           }
         }
       }
+      result.animation = (_normalizeAnimationKnob = (0, import_theme.normalizeAnimationKnob)(result.animation)) !== null && _normalizeAnimationKnob !== void 0 ? _normalizeAnimationKnob : import_theme.defaultKnobs.animation;
       var _iteratorNormalCompletion12 = true,
         _didIteratorError12 = false,
         _iteratorError12 = void 0;
@@ -776,18 +792,20 @@ function createPreview(options) {
       return {
         preset: {
           ...import_theme.defaultPreset,
-          theme: colorGlobal || import_theme.defaultPreset.theme,
+          theme: presetTheme,
           knobs: {
             ...import_theme.defaultKnobs,
             ...knobUpdate
           }
         },
-        overrides: void 0
+        overrides: void 0,
+        presetName: activePresetName,
+        scaleId
       };
-    }, [knobUpdate, colorGlobal]);
+    }, [knobUpdate, presetTheme, activePresetName, scaleId]);
     var animationValue = presetCtxValue.preset.knobs.animation;
     (0, import_react.useEffect)(function () {
-      var ms = animationValue === "none" ? "0ms" : animationValue === "quick" ? "100ms" : animationValue === "medium" ? "200ms" : animationValue === "slow" || animationValue === "lazy" ? "350ms" : animationValue === "bouncy" ? "300ms" : "200ms";
+      var ms = `${animationValue === "none" ? 0 : import_theme.animationDurations[animationValue]}ms`;
       document.documentElement.style.setProperty("--mp-transition", ms);
     }, [animationValue]);
     var storyContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(CanvasBackground, {
@@ -808,11 +826,11 @@ function createPreview(options) {
         /* @__PURE__ */
         (0, import_jsx_runtime.jsx)(AnimationNamesEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(FrappeDebugEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(BaseThemeColorEmitter, {}),
         /* Always wrap in Theme so the host node exists on the default
-        colour cell too. An empty colour global keeps the scheme
+        colour cell too. An empty preset theme keeps the scheme
         theme; a named colour is the Tamagui subtheme. */
         /* @__PURE__ */
         (0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
-          name: colorGlobal || resolvedScheme,
+          name: presetTheme || resolvedScheme,
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ThemeColorEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
             event: accentColorsChannelEvent,
             prefix: "accent"
@@ -820,8 +838,8 @@ function createPreview(options) {
         }), /* Opposite scheme emitters */
         /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
           name: oppositeScheme,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(OppositeThemeColorEmitter, {}), colorGlobal ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
-            name: colorGlobal,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(OppositeThemeColorEmitter, {}), presetTheme ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
+            name: presetTheme,
             children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
               event: baseOppositeChannelEvent
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
@@ -837,7 +855,7 @@ function createPreview(options) {
             })]
           })]
         })]
-      }, themeConfigName)
+      }, `${themeConfigName}:${scaleId}`)
     });
   }
   var frameworkDecorator = function frameworkDecorator2(Story, context) {