@player-ui/storybook 1.1.0-next.2 → 1.1.0-next.4

package/dist/index.js

@@ -275,6 +275,7 @@ var StorybookControlsContext = React5__namespace.default.createContext({
   controls: {}
 });
 var PlayerOptionsContext = React5__namespace.default.createContext({ options: {} });
+var StartFormatContext = React5__namespace.default.createContext({});
 var SuspenseSpinner = (props) => {
   return /* @__PURE__ */ React5__namespace.default.createElement(React5__namespace.default.Suspense, { fallback: /* @__PURE__ */ React5__namespace.default.createElement("div", { className: "sb-loader" }) }, props.children);
 };
@@ -282,6 +283,7 @@ var PlayerJsonEditorStory = () => {
   const jsonEditorValue = useJSONEditorValue();
   useFlowSetListener(previewApi.addons.getChannel());
   const { plugins } = React5__namespace.default.useContext(ReactPlayerPluginContext);
+  const { format } = React5__namespace.default.useContext(StartFormatContext);
   const dispatch = reactRedux.useDispatch();
   const [playerState, setPlayerState] = React5__namespace.default.useState("not-started");
   const [trackedBeacons, setTrackedBeacons] = React5__namespace.default.useState([]);
@@ -302,8 +304,10 @@ var PlayerJsonEditorStory = () => {
     }
     setPlayerState("in-progress");
     setTrackedBeacons([]);
-    setKey(jsonEditorValue.value.id);
-    wp.start(jsonEditorValue.value).then(() => {
+    setKey(
+      jsonEditorValue.value.id ?? jsonEditorValue.value.surfaceId
+    );
+    wp.start(jsonEditorValue.value, format ? { format } : void 0).then(() => {
       setPlayerState("completed");
     }).catch((e) => {
       console.error("Error starting flow", e);
@@ -365,14 +369,12 @@ var LocalPlayerStory = (props) => {
   }
   return /* @__PURE__ */ React5__namespace.default.createElement(components.Placeholder, null, "Unable to render flow");
 };
-function wrapInLazy(Component, mockFactory, other) {
+function wrapInLazy(Component, mockFactory, other, skipMakeFlow) {
   const asPlayer = async () => {
     const mock = typeof mockFactory === "function" ? await mockFactory() : mockFactory;
     const Comp = () => {
-      const flow = {
-        ...makeFlow.makeFlow("default" in mock ? mock.default : mock),
-        ...other ?? {}
-      };
+      const raw = "default" in mock ? mock.default : mock;
+      const flow = skipMakeFlow ? { ...raw, ...other ?? {} } : { ...makeFlow.makeFlow(raw), ...other ?? {} };
       return /* @__PURE__ */ React5__namespace.default.createElement(Component, { mock: flow });
     };
     return {
@@ -382,10 +384,10 @@ function wrapInLazy(Component, mockFactory, other) {
   return React5__namespace.default.lazy(asPlayer);
 }
 var PlayerStory = (props) => {
-  const { flow, storybookControls, options: options2, ...other } = props;
+  const { flow, storybookControls, options: options2, format, ...other } = props;
   useContentKind("json");
   const MockComp = React5__namespace.default.useMemo(
-    () => wrapInLazy(LocalPlayerStory, flow, other),
+    () => wrapInLazy(LocalPlayerStory, flow, other, format === "a2ui"),
     []
   );
   return /* @__PURE__ */ React5__namespace.default.createElement("div", null, /* @__PURE__ */ React5__namespace.default.createElement(SuspenseSpinner, null, /* @__PURE__ */ React5__namespace.default.createElement(
@@ -402,7 +404,7 @@ var PlayerStory = (props) => {
           options: options2
         }
       },
-      /* @__PURE__ */ React5__namespace.default.createElement(MockComp, null)
+      /* @__PURE__ */ React5__namespace.default.createElement(StartFormatContext.Provider, { value: { format } }, /* @__PURE__ */ React5__namespace.default.createElement(MockComp, null))
     )
   )));
 };
@@ -710,6 +712,23 @@ var PlayerDecorator = (Story, ctx) => {
     /* @__PURE__ */ React5__namespace.default.createElement(DSLPluginContext.Provider, { value: playerParams.dslEditor ?? {} }, Story())
   )));
 };
+function createA2UIStory(loader, options2) {
+  const Comp = () => /* @__PURE__ */ React5__namespace.default.createElement(
+    PlayerStory,
+    {
+      flow: async () => {
+        const mod2 = await loader();
+        const snap = "default" in mod2 ? mod2.default : mod2;
+        return { default: snap };
+      },
+      format: "a2ui",
+      options: options2
+    }
+  );
+  if (options2 == null ? void 0 : options2.args)
+    Comp.args = options2.args;
+  return { render: Comp };
+}
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/preview.tsx
 var preview = {
@@ -1526,8 +1545,10 @@ exports.PlayerRenderContext = PlayerRenderContext;
 exports.PlayerRenderContextWrapper = PlayerRenderContextWrapper;
 exports.PlayerStory = PlayerStory;
 exports.ReactPlayerPluginContext = ReactPlayerPluginContext;
+exports.StartFormatContext = StartFormatContext;
 exports.StorybookControlsContext = StorybookControlsContext;
 exports.SuspenseSpinner = SuspenseSpinner;
+exports.createA2UIStory = createA2UIStory;
 exports.createDSLStory = createDSLStory;
 exports.execute = execute;
 exports.preview = preview;

package/dist/index.mjs

@@ -250,6 +250,7 @@ var StorybookControlsContext = React5__default.createContext({
   controls: {}
 });
 var PlayerOptionsContext = React5__default.createContext({ options: {} });
+var StartFormatContext = React5__default.createContext({});
 var SuspenseSpinner = (props) => {
   return /* @__PURE__ */ React5__default.createElement(React5__default.Suspense, { fallback: /* @__PURE__ */ React5__default.createElement("div", { className: "sb-loader" }) }, props.children);
 };
@@ -257,6 +258,7 @@ var PlayerJsonEditorStory = () => {
   const jsonEditorValue = useJSONEditorValue();
   useFlowSetListener(addons$1.getChannel());
   const { plugins } = React5__default.useContext(ReactPlayerPluginContext);
+  const { format } = React5__default.useContext(StartFormatContext);
   const dispatch = useDispatch();
   const [playerState, setPlayerState] = React5__default.useState("not-started");
   const [trackedBeacons, setTrackedBeacons] = React5__default.useState([]);
@@ -277,8 +279,10 @@ var PlayerJsonEditorStory = () => {
     }
     setPlayerState("in-progress");
     setTrackedBeacons([]);
-    setKey(jsonEditorValue.value.id);
-    wp.start(jsonEditorValue.value).then(() => {
+    setKey(
+      jsonEditorValue.value.id ?? jsonEditorValue.value.surfaceId
+    );
+    wp.start(jsonEditorValue.value, format ? { format } : void 0).then(() => {
       setPlayerState("completed");
     }).catch((e) => {
       console.error("Error starting flow", e);
@@ -340,14 +344,12 @@ var LocalPlayerStory = (props) => {
   }
   return /* @__PURE__ */ React5__default.createElement(Placeholder, null, "Unable to render flow");
 };
-function wrapInLazy(Component, mockFactory, other) {
+function wrapInLazy(Component, mockFactory, other, skipMakeFlow) {
   const asPlayer = async () => {
     const mock = typeof mockFactory === "function" ? await mockFactory() : mockFactory;
     const Comp = () => {
-      const flow = {
-        ...makeFlow("default" in mock ? mock.default : mock),
-        ...other ?? {}
-      };
+      const raw = "default" in mock ? mock.default : mock;
+      const flow = skipMakeFlow ? { ...raw, ...other ?? {} } : { ...makeFlow(raw), ...other ?? {} };
       return /* @__PURE__ */ React5__default.createElement(Component, { mock: flow });
     };
     return {
@@ -357,10 +359,10 @@ function wrapInLazy(Component, mockFactory, other) {
   return React5__default.lazy(asPlayer);
 }
 var PlayerStory = (props) => {
-  const { flow, storybookControls, options: options2, ...other } = props;
+  const { flow, storybookControls, options: options2, format, ...other } = props;
   useContentKind("json");
   const MockComp = React5__default.useMemo(
-    () => wrapInLazy(LocalPlayerStory, flow, other),
+    () => wrapInLazy(LocalPlayerStory, flow, other, format === "a2ui"),
     []
   );
   return /* @__PURE__ */ React5__default.createElement("div", null, /* @__PURE__ */ React5__default.createElement(SuspenseSpinner, null, /* @__PURE__ */ React5__default.createElement(
@@ -377,7 +379,7 @@ var PlayerStory = (props) => {
           options: options2
         }
       },
-      /* @__PURE__ */ React5__default.createElement(MockComp, null)
+      /* @__PURE__ */ React5__default.createElement(StartFormatContext.Provider, { value: { format } }, /* @__PURE__ */ React5__default.createElement(MockComp, null))
     )
   )));
 };
@@ -685,6 +687,23 @@ var PlayerDecorator = (Story, ctx) => {
     /* @__PURE__ */ React5__default.createElement(DSLPluginContext.Provider, { value: playerParams.dslEditor ?? {} }, Story())
   )));
 };
+function createA2UIStory(loader, options2) {
+  const Comp = () => /* @__PURE__ */ React5__default.createElement(
+    PlayerStory,
+    {
+      flow: async () => {
+        const mod2 = await loader();
+        const snap = "default" in mod2 ? mod2.default : mod2;
+        return { default: snap };
+      },
+      format: "a2ui",
+      options: options2
+    }
+  );
+  if (options2 == null ? void 0 : options2.args)
+    Comp.args = options2.args;
+  return { render: Comp };
+}
 
 // ../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/tools/storybook/src/preview.tsx
 var preview = {
@@ -1492,6 +1511,6 @@ var register = () => {
   });
 };
 
-export { DSLLocalPlayerStory, DSLPlayerStory, DSLPluginContext, PlayerDecorator, PlayerOptionsContext, PlayerRenderContext, PlayerRenderContextWrapper, PlayerStory, ReactPlayerPluginContext, StorybookControlsContext, SuspenseSpinner, createDSLStory, execute, preview, register, toLazyStory };
+export { DSLLocalPlayerStory, DSLPlayerStory, DSLPluginContext, PlayerDecorator, PlayerOptionsContext, PlayerRenderContext, PlayerRenderContextWrapper, PlayerStory, ReactPlayerPluginContext, StartFormatContext, StorybookControlsContext, SuspenseSpinner, createA2UIStory, createDSLStory, execute, preview, register, toLazyStory };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -8,7 +8,7 @@
     "manager.mjs"
   ],
   "name": "@player-ui/storybook",
-  "version": "1.1.0-next.2",
+  "version": "1.1.0-next.4",
   "exports": {
     ".": {
       "types": "./src/index.ts",
@@ -24,10 +24,12 @@
   },
   "main": "./dist/index.js",
   "dependencies": {
-    "@player-ui/beacon-plugin-react": "1.1.0-next.2",
-    "@player-ui/make-flow": "1.1.0-next.2",
-    "@player-ui/react": "1.1.0-next.2",
-    "@player-ui/metrics-plugin-react": "1.1.0-next.2",
+    "@player-ui/a2ui-plugin": "1.1.0-next.4",
+    "@player-ui/beacon-plugin-react": "1.1.0-next.4",
+    "@player-ui/make-flow": "1.1.0-next.4",
+    "@player-ui/player": "1.1.0-next.4",
+    "@player-ui/react": "1.1.0-next.4",
+    "@player-ui/metrics-plugin-react": "1.1.0-next.4",
     "@vueless/storybook-dark-mode": "^10.0.4",
     "storybook": "^10.1.4",
     "@storybook/icons": "^2.0.1",

package/src/a2ui/createA2UIStory.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { A2UISnapshot } from "@player-ui/a2ui-plugin";
+import { PlayerStory } from "../player";
+
+export type A2UIStoryLoader = () => Promise<
+  A2UISnapshot | { default: A2UISnapshot }
+>;
+
+/**
+ * Story factory for A2UI snapshots. Hands the snapshot directly to
+ * `ReactPlayer.start(..., { format: "a2ui" })`, letting Player adapt it on
+ * every start. The editor surfaces the raw snapshot JSON, so live edits or
+ * arbitrary user-pasted A2UI content re-render through the adapter without
+ * a separate build step.
+ */
+export function createA2UIStory(loader: A2UIStoryLoader, options?: any) {
+  const Comp = () => (
+    <PlayerStory
+      flow={async () => {
+        const mod = await loader();
+        const snap = "default" in mod ? mod.default : mod;
+        return { default: snap };
+      }}
+      format="a2ui"
+      options={options}
+    />
+  );
+  if (options?.args) (Comp as any).args = options.args;
+  return { render: Comp };
+}

package/src/a2ui/index.ts

@@ -0,0 +1 @@
+export * from "./createA2UIStory";

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./decorator";
 export * from "./player";
 export * from "./dsl";
+export * from "./a2ui";
 export * from "./preview";
 export * from "./manager";

package/src/player/PlayerStory.tsx

@@ -8,6 +8,7 @@ import type {
 import { ReactPlayer } from "@player-ui/react";
 import { BeaconPlugin } from "@player-ui/beacon-plugin-react";
 import { makeFlow } from "@player-ui/make-flow";
+import type { StartOptions } from "@player-ui/player";
 import { Placeholder } from "storybook/internal/components";
 import { useDispatch, useSelector } from "react-redux";
 import { addons } from "storybook/preview-api";
@@ -61,6 +62,15 @@ export const PlayerOptionsContext = React.createContext<{
   options?: ReactPlayerOptions;
 }>({ options: {} });
 
+/**
+ * Content format passed to `ReactPlayer.start`. When `"a2ui"`, the editor
+ * value is treated as an A2UI snapshot and Player will adapt it on every
+ * start — so users can edit the snapshot live in the JSON editor.
+ */
+export const StartFormatContext = React.createContext<{
+  format?: StartOptions["format"];
+}>({});
+
 export const SuspenseSpinner = (props: PropsWithChildren) => {
   return (
     <React.Suspense fallback={<div className="sb-loader" />}>
@@ -74,6 +84,7 @@ const PlayerJsonEditorStory = () => {
   useFlowSetListener(addons.getChannel());
 
   const { plugins } = React.useContext(ReactPlayerPluginContext);
+  const { format } = React.useContext(StartFormatContext);
 
   const dispatch = useDispatch();
 
@@ -103,9 +114,12 @@ const PlayerJsonEditorStory = () => {
     setPlayerState("in-progress");
     setTrackedBeacons([]);
 
-    setKey(jsonEditorValue.value.id);
+    setKey(
+      (jsonEditorValue.value as { id?: string; surfaceId?: string }).id ??
+        (jsonEditorValue.value as { surfaceId?: string }).surfaceId,
+    );
 
-    wp.start(jsonEditorValue.value)
+    wp.start(jsonEditorValue.value, format ? { format } : undefined)
       .then(() => {
         setPlayerState("completed");
       })
@@ -190,7 +204,7 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
   return <Placeholder>Unable to render flow</Placeholder>;
 };
 
-type Mock = Record<string, unknown>;
+type Mock = object;
 type MockFactory = () => Mock;
 type MockFactoryOrPromise = MockFactory | Mock;
 
@@ -207,6 +221,8 @@ function wrapInLazy(
 
   /** Any other props to pass */
   other?: any,
+  /** Skip makeFlow wrapping — used for raw content like A2UI snapshots. */
+  skipMakeFlow?: boolean,
 ) {
   /** an async loader to wrap the mock as a player component */
   const asPlayer = async () => {
@@ -215,10 +231,13 @@ function wrapInLazy(
 
     /** The component to load */
     const Comp = () => {
-      const flow = {
-        ...makeFlow("default" in mock ? mock.default : mock),
-        ...(other ?? {}),
-      };
+      const raw = ("default" in mock ? mock.default : mock) as Record<
+        string,
+        unknown
+      >;
+      const flow = skipMakeFlow
+        ? ({ ...raw, ...(other ?? {}) } as Flow)
+        : ({ ...makeFlow(raw), ...(other ?? {}) } as Flow);
 
       return <Component mock={flow} />;
     };
@@ -240,6 +259,12 @@ export interface PlayerStoryProps {
   storybookControls?: Flow["data"];
   /**  options, like suspend and plugins */
   options?: ReactPlayerOptions;
+  /**
+   * Content format passed to Player.start. Default `"player"` (Flow JSON).
+   * Use `"a2ui"` to feed an A2UI snapshot — Player adapts on every start so
+   * users can edit the snapshot live.
+   */
+  format?: StartOptions["format"];
 }
 
 /**
@@ -247,11 +272,11 @@ export interface PlayerStoryProps {
  * This handles all of the wiring of the mock into the flow editor, events, etc
  */
 export const PlayerStory = (props: PlayerStoryProps) => {
-  const { flow, storybookControls, options, ...other } = props;
+  const { flow, storybookControls, options, format, ...other } = props;
   useContentKind("json");
 
   const MockComp = React.useMemo(
-    () => wrapInLazy(LocalPlayerStory, flow, other),
+    () => wrapInLazy(LocalPlayerStory, flow, other, format === "a2ui"),
     [],
   );
 
@@ -268,7 +293,9 @@ export const PlayerStory = (props: PlayerStoryProps) => {
               options,
             }}
           >
-            <MockComp />
+            <StartFormatContext.Provider value={{ format }}>
+              <MockComp />
+            </StartFormatContext.Provider>
           </PlayerOptionsContext.Provider>
         </StorybookControlsContext.Provider>
       </SuspenseSpinner>