ai-design-system 0.1.100 → 0.1.101

package/components/composites/ScenePlayer/ScenePlayer.stories.tsx

@@ -14,6 +14,7 @@ const meta = {
   tags: ["autodocs"],
   parameters: { layout: "fullscreen" },
   args: {
+    onBack: fn(),
     onClose: fn(),
     onPublish: fn(),
     onSceneChange: fn(),

package/components/composites/ScenePlayer/ScenePlayer.tsx

@@ -25,6 +25,7 @@ export interface ScenePlayerProps extends React.HTMLAttributes<HTMLDivElement> {
   avatarColor?: string;
   initialSceneIndex?: number;
   isMuted?: boolean;
+  onBack?: () => void;
   onClose?: () => void;
   onPublish?: (currentScene: SceneItem) => void;
   publishPlaceholder?: string;
@@ -40,6 +41,7 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
       avatarColor = "bg-indigo-600",
       initialSceneIndex = 0,
       isMuted: initialMuted = false,
+      onBack,
       onClose,
       onPublish,
       publishPlaceholder = "Ready to publish...",
@@ -49,6 +51,8 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
     },
     ref
   ) => {
+    const handleBack = onBack || onClose;
+
     const [currentSceneIndex, setCurrentSceneIndex] = React.useState<number>(() => {
       if (initialSceneIndex >= 0 && initialSceneIndex < scenes.length) {
         return initialSceneIndex;
@@ -117,7 +121,7 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
           handleNext();
         } else if (e.key === "Escape") {
           e.preventDefault();
-          onClose?.();
+          handleBack?.();
         } else if (e.key === "m" || e.key === "M") {
           e.preventDefault();
           setIsMuted((prev) => !prev);
@@ -126,7 +130,7 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
 
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [handlePrev, handleNext, onClose]);
+    }, [handlePrev, handleNext, handleBack]);
 
     if (!scenes || scenes.length === 0) {
       return (
@@ -137,14 +141,14 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
           {...props}
         >
           <p className="text-white/70 text-sm">No scenes available</p>
-          {onClose && (
+          {handleBack && (
             <Button
               variant="ghost"
-              onClick={onClose}
+              onClick={handleBack}
               className="mt-4 text-white hover:bg-white/20"
-              data-testid="btn-close"
+              data-testid="btn-back"
             >
-              Close
+              Back
             </Button>
           )}
         </div>
@@ -183,8 +187,22 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
         </div>
 
         {/* Story Header Overlay */}
-        <div className="flex items-center justify-between px-4 py-2.5 z-20 shrink-0">
-          <div className="flex items-center gap-2.5 min-w-0">
+        <div className="flex items-center justify-between px-3 py-2.5 z-20 shrink-0">
+          <div className="flex items-center gap-2 min-w-0">
+            {/* Back Button */}
+            {handleBack && (
+              <Button
+                variant="ghost"
+                size="icon"
+                data-testid="btn-back"
+                aria-label="Back"
+                onClick={handleBack}
+                className="h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer shrink-0"
+              >
+                <Icon name="arrow-left" className="w-5 h-5 text-white" />
+              </Button>
+            )}
+
             <div
               className={cn(
                 "w-9 h-9 rounded-full flex items-center justify-center font-bold text-sm text-white shrink-0 ring-1.5 ring-white/80 overflow-hidden",
@@ -215,20 +233,6 @@ export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
             >
               <Icon name={isMuted ? "volume-x" : "volume-2"} className="w-4 h-4" />
             </Button>
-
-            {/* Close Button */}
-            {onClose && (
-              <Button
-                variant="ghost"
-                size="icon"
-                data-testid="btn-close"
-                aria-label="Close scenes view"
-                onClick={onClose}
-                className="h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer"
-              >
-                <Icon name="x" className="w-4 h-4" />
-              </Button>
-            )}
           </div>
         </div>
 

package/dist/index.cjs

@@ -14575,6 +14575,7 @@ var ScenePlayer = React3__namespace.forwardRef(
       avatarColor = "bg-indigo-600",
       initialSceneIndex = 0,
       isMuted: initialMuted = false,
+      onBack,
       onClose,
       onPublish,
       publishPlaceholder = "Ready to publish...",
@@ -14587,6 +14588,7 @@ var ScenePlayer = React3__namespace.forwardRef(
       "avatarColor",
       "initialSceneIndex",
       "isMuted",
+      "onBack",
       "onClose",
       "onPublish",
       "publishPlaceholder",
@@ -14594,6 +14596,7 @@ var ScenePlayer = React3__namespace.forwardRef(
       "className"
     ]);
     var _a2;
+    const handleBack = onBack || onClose;
     const [currentSceneIndex, setCurrentSceneIndex] = React3__namespace.useState(() => {
       if (initialSceneIndex >= 0 && initialSceneIndex < scenes.length) {
         return initialSceneIndex;
@@ -14653,7 +14656,7 @@ var ScenePlayer = React3__namespace.forwardRef(
           handleNext();
         } else if (e.key === "Escape") {
           e.preventDefault();
-          onClose == null ? void 0 : onClose();
+          handleBack == null ? void 0 : handleBack();
         } else if (e.key === "m" || e.key === "M") {
           e.preventDefault();
           setIsMuted((prev) => !prev);
@@ -14661,7 +14664,7 @@ var ScenePlayer = React3__namespace.forwardRef(
       };
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [handlePrev, handleNext, onClose]);
+    }, [handlePrev, handleNext, handleBack]);
     if (!scenes || scenes.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -14672,14 +14675,14 @@ var ScenePlayer = React3__namespace.forwardRef(
         }, props), {
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white/70 text-sm", children: "No scenes available" }),
-            onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            handleBack && /* @__PURE__ */ jsxRuntime.jsx(
               Button2,
               {
                 variant: "ghost",
-                onClick: onClose,
+                onClick: handleBack,
                 className: "mt-4 text-white hover:bg-white/20",
-                "data-testid": "btn-close",
-                children: "Close"
+                "data-testid": "btn-back",
+                children: "Back"
               }
             )
           ]
@@ -14717,8 +14720,20 @@ var ScenePlayer = React3__namespace.forwardRef(
               scene.id || `scene-${idx}`
             );
           }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 z-20 shrink-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2.5 z-20 shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+              handleBack && /* @__PURE__ */ jsxRuntime.jsx(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  "data-testid": "btn-back",
+                  "aria-label": "Back",
+                  onClick: handleBack,
+                  className: "h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer shrink-0",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow-left", className: "w-5 h-5 text-white" })
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -14739,32 +14754,18 @@ var ScenePlayer = React3__namespace.forwardRef(
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Button2,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  "data-testid": "btn-toggle-mute",
-                  "aria-label": isMuted ? "Unmute audio" : "Mute audio",
-                  onClick: () => setIsMuted((prev) => !prev),
-                  className: "h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: isMuted ? "volume-x" : "volume-2", className: "w-4 h-4" })
-                }
-              ),
-              onClose && /* @__PURE__ */ jsxRuntime.jsx(
-                Button2,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  "data-testid": "btn-close",
-                  "aria-label": "Close scenes view",
-                  onClick: onClose,
-                  className: "h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "x", className: "w-4 h-4" })
-                }
-              )
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Button2,
+              {
+                variant: "ghost",
+                size: "icon",
+                "data-testid": "btn-toggle-mute",
+                "aria-label": isMuted ? "Unmute audio" : "Mute audio",
+                onClick: () => setIsMuted((prev) => !prev),
+                className: "h-8 w-8 rounded-full bg-black/40 hover:bg-white/20 text-white p-0 cursor-pointer",
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: isMuted ? "volume-x" : "volume-2", className: "w-4 h-4" })
+              }
+            ) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative flex items-center justify-center bg-black overflow-hidden min-h-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx(