ai-design-system 0.1.98 → 0.1.100

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScenePlayer, type SceneItem } from "./ScenePlayer";
+import { fn } from "@storybook/test";
+
+/**
+ * ScenePlayer Composite Stories
+ *
+ * Full-screen segmented video player for scene-by-scene review with progress tracks,
+ * mute toggle, step zones, and publish action.
+ */
+const meta = {
+  title: "Composites/ScenePlayer",
+  component: ScenePlayer,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+  args: {
+    onClose: fn(),
+    onPublish: fn(),
+    onSceneChange: fn(),
+  },
+} satisfies Meta<typeof ScenePlayer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockScenes: SceneItem[] = [
+  {
+    id: "001",
+    sceneNumber: 1,
+    totalScenes: 3,
+    start_sec: 0,
+    duration_sec: 1.6,
+    templateId: "grid2_compare_visual",
+    caption: "iOS apps used to mean one",
+    scene_clip_url:
+      "https://hel1.your-objectstorage.com/waypoint-s3-dev/01M32NJZHXKCX1CQKVEVA49SJT/playground-1790017380397-6ffe0ec0/artifacts/scenes/scene001/clip.mp4",
+  },
+  {
+    id: "002",
+    sceneNumber: 2,
+    totalScenes: 3,
+    start_sec: 1.6,
+    duration_sec: 1.5,
+    templateId: "full_visual_loop",
+    caption: "thing you needed a Mac. And nobody",
+    scene_clip_url:
+      "https://hel1.your-objectstorage.com/waypoint-s3-dev/01M32NJZHXKCX1CQKVEVA49SJT/playground-1790017380397-6ffe0ec0/artifacts/scenes/scene002/clip.mp4",
+  },
+  {
+    id: "003",
+    sceneNumber: 3,
+    totalScenes: 3,
+    start_sec: 3.1,
+    duration_sec: 1.5,
+    templateId: "full_talking_head",
+    caption: "told the AI, every AI",
+    scene_clip_url:
+      "https://hel1.your-objectstorage.com/waypoint-s3-dev/01M32NJZHXKCX1CQKVEVA49SJT/playground-1790017380397-6ffe0ec0/artifacts/scenes/scene003/clip.mp4",
+  },
+];
+
+/**
+ * Default usage with multiple scenes
+ */
+export const Default: Story = {
+  args: {
+    scenes: mockScenes,
+    title: "Devin for iOS",
+    avatarInitials: "D",
+  },
+};
+
+/**
+ * Empty scenes fallback
+ */
+export const EmptyState: Story = {
+  args: {
+    scenes: [],
+    title: "No Scenes",
+  },
+};

package/components/composites/ScenePlayer/ScenePlayer.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@/components/primitives/Button";
+import { Icon } from "@/components/primitives/Icon";
+import { cn } from "@/lib/utils";
+
+export interface SceneItem {
+  id: string;
+  sceneNumber?: number;
+  totalScenes?: number;
+  start_sec?: number;
+  duration_sec?: number;
+  templateId?: string;
+  caption?: string;
+  scene_clip_url: string;
+  scene_audio_clip_url?: string;
+  [key: string]: unknown;
+}
+
+export interface ScenePlayerProps extends React.HTMLAttributes<HTMLDivElement> {
+  scenes: SceneItem[];
+  title?: string;
+  avatarInitials?: string;
+  avatarColor?: string;
+  initialSceneIndex?: number;
+  isMuted?: boolean;
+  onClose?: () => void;
+  onPublish?: (currentScene: SceneItem) => void;
+  publishPlaceholder?: string;
+  onSceneChange?: (sceneIndex: number, scene: SceneItem) => void;
+}
+
+export const ScenePlayer = React.forwardRef<HTMLDivElement, ScenePlayerProps>(
+  (
+    {
+      scenes = [],
+      title = "Devin for iOS",
+      avatarInitials = "D",
+      avatarColor = "bg-indigo-600",
+      initialSceneIndex = 0,
+      isMuted: initialMuted = false,
+      onClose,
+      onPublish,
+      publishPlaceholder = "Ready to publish...",
+      onSceneChange,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [currentSceneIndex, setCurrentSceneIndex] = React.useState<number>(() => {
+      if (initialSceneIndex >= 0 && initialSceneIndex < scenes.length) {
+        return initialSceneIndex;
+      }
+      return 0;
+    });
+
+    const [isMuted, setIsMuted] = React.useState<boolean>(initialMuted);
+    const videoRef = React.useRef<HTMLVideoElement | null>(null);
+
+    const activeScene = scenes[currentSceneIndex] || scenes[0];
+
+    const handlePrev = React.useCallback(() => {
+      if (!scenes.length) return;
+      setCurrentSceneIndex((prev) => {
+        const nextIdx = prev > 0 ? prev - 1 : scenes.length - 1;
+        onSceneChange?.(nextIdx, scenes[nextIdx]);
+        return nextIdx;
+      });
+    }, [scenes, onSceneChange]);
+
+    const handleNext = React.useCallback(() => {
+      if (!scenes.length) return;
+      setCurrentSceneIndex((prev) => {
+        const nextIdx = prev < scenes.length - 1 ? prev + 1 : 0;
+        onSceneChange?.(nextIdx, scenes[nextIdx]);
+        return nextIdx;
+      });
+    }, [scenes, onSceneChange]);
+
+    const handleSceneEnded = React.useCallback(() => {
+      if (!scenes.length) return;
+      setCurrentSceneIndex((prev) => {
+        const nextIdx = prev < scenes.length - 1 ? prev + 1 : 0;
+        onSceneChange?.(nextIdx, scenes[nextIdx]);
+        return nextIdx;
+      });
+    }, [scenes, onSceneChange]);
+
+    // Autoplay & mute handling
+    React.useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+
+      video.muted = isMuted;
+      const playPromise = video.play();
+      if (playPromise !== undefined) {
+        playPromise.catch(() => {
+          if (!isMuted) {
+            video.muted = true;
+            setIsMuted(true);
+            video.play().catch(() => {});
+          }
+        });
+      }
+    }, [activeScene?.scene_clip_url, isMuted]);
+
+    // Keyboard navigation
+    React.useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          handlePrev();
+        } else if (e.key === "ArrowRight" || e.key === " ") {
+          e.preventDefault();
+          handleNext();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          onClose?.();
+        } else if (e.key === "m" || e.key === "M") {
+          e.preventDefault();
+          setIsMuted((prev) => !prev);
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handlePrev, handleNext, onClose]);
+
+    if (!scenes || scenes.length === 0) {
+      return (
+        <div
+          ref={ref}
+          className={cn("flex flex-col items-center justify-center w-full h-full bg-black text-white p-6", className)}
+          data-testid="screen-scenes"
+          {...props}
+        >
+          <p className="text-white/70 text-sm">No scenes available</p>
+          {onClose && (
+            <Button
+              variant="ghost"
+              onClick={onClose}
+              className="mt-4 text-white hover:bg-white/20"
+              data-testid="btn-close"
+            >
+              Close
+            </Button>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col w-full h-full min-h-full bg-black text-white relative select-none overflow-hidden",
+          className
+        )}
+        data-testid="screen-scenes"
+        {...props}
+      >
+        {/* Top Segmented Progress Bar */}
+        <div className="flex items-center gap-[3px] px-2 pt-3 pb-1.5 z-20 shrink-0">
+          {scenes.map((scene, idx) => {
+            const isCompleted = idx < currentSceneIndex;
+            const isCurrent = idx === currentSceneIndex;
+            return (
+              <div
+                key={scene.id || `scene-${idx}`}
+                className="flex-1 h-[2.5px] rounded-[2px] bg-white/35 overflow-hidden"
+              >
+                <div
+                  className={cn(
+                    "h-full w-full transition-all duration-150",
+                    isCompleted || isCurrent ? "bg-white" : "bg-transparent"
+                  )}
+                />
+              </div>
+            );
+          })}
+        </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={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",
+                avatarColor
+              )}
+            >
+              {avatarInitials}
+            </div>
+            <div className="flex flex-col min-w-0 justify-center">
+              <span className="font-bold text-sm text-white truncate max-w-[200px]">
+                {title}
+              </span>
+              <span className="text-xs text-white/75 truncate">
+                Scene {activeScene?.sceneNumber ?? currentSceneIndex + 1} of {scenes.length}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 shrink-0">
+            {/* Mute/Unmute Toggle Button */}
+            <Button
+              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"
+            >
+              <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>
+
+        {/* Main Scene Video Player Stage */}
+        <div className="flex-1 relative flex items-center justify-center bg-black overflow-hidden min-h-0">
+          <video
+            ref={videoRef}
+            key={activeScene?.scene_clip_url}
+            src={activeScene?.scene_clip_url}
+            autoPlay
+            playsInline
+            loop={false}
+            muted={isMuted}
+            onEnded={handleSceneEnded}
+            className="w-full h-full object-contain bg-black"
+          />
+
+          {/* Invisible Interactive Tap Zones for Stepping Scenes */}
+          <div className="absolute inset-x-0 top-[60px] bottom-[70px] flex z-10">
+            <Button
+              variant="ghost"
+              data-testid="btn-prev-scene"
+              aria-label="Previous scene"
+              onClick={handlePrev}
+              className="flex-1 h-full cursor-pointer bg-transparent hover:bg-transparent p-0 rounded-none border-none focus-visible:ring-0 focus-visible:outline-none"
+            />
+            <Button
+              variant="ghost"
+              data-testid="btn-next-scene"
+              aria-label="Next scene"
+              onClick={handleNext}
+              className="flex-1 h-full cursor-pointer bg-transparent hover:bg-transparent p-0 rounded-none border-none focus-visible:ring-0 focus-visible:outline-none"
+            />
+          </div>
+        </div>
+
+        {/* Bottom Action Bar */}
+        <div className="flex items-center gap-3 px-4 py-3.5 bg-black z-20 shrink-0">
+          <div className="flex-1 h-11 rounded-full bg-white/15 border border-white/25 px-4 flex items-center text-sm text-white/65 select-none truncate">
+            {publishPlaceholder}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            data-testid="btn-publish-scene"
+            aria-label="Publish scene"
+            onClick={() => onPublish?.(activeScene)}
+            className="w-11 h-11 rounded-full bg-emerald-500 hover:bg-emerald-600 text-white shrink-0 p-0 shadow-md cursor-pointer transition-transform active:scale-95"
+          >
+            <Icon name="send" className="w-4 h-4 text-white" />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+);
+
+ScenePlayer.displayName = "ScenePlayer";

package/components/composites/ScenePlayer/index.ts

@@ -0,0 +1,2 @@
+export { ScenePlayer } from "./ScenePlayer";
+export type { ScenePlayerProps, SceneItem } from "./ScenePlayer";

package/components/composites/StoriesBar/StoriesBar.tsx

@@ -49,6 +49,8 @@ function getStoryStatusStyle(status?: StoryItem["status"]) {
 
 export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
   ({ stories, activeStoryId, onStoryClick, defaultIcon = "clapperboard", className, ...props }, ref) => {
+    const hasActiveStory = Boolean(activeStoryId);
+
     return (
       <div
         ref={ref}
@@ -68,16 +70,19 @@ export const StoriesBar = React.forwardRef<HTMLDivElement, StoriesBarProps>(
                 key={story.id}
                 variant="ghost"
                 onClick={() => onStoryClick(story)}
-                className="flex flex-col items-center gap-1 h-auto p-0 hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg cursor-pointer group shrink-0"
+                className={cn(
+                  "flex flex-col items-center gap-1 h-auto p-0 hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg cursor-pointer group shrink-0 transition-all duration-200",
+                  hasActiveStory && (isActive ? "opacity-100 scale-105" : "opacity-35 hover:opacity-60")
+                )}
                 data-testid={`btn-story-${story.id}`}
                 aria-label={`Open story: ${story.title}`}
               >
                 <div className="relative w-9 h-9 shrink-0 aspect-square rounded-full transition-transform group-hover:scale-105">
                   <div
                     className={cn(
-                      "w-full h-full rounded-full flex items-center justify-center border transition-colors overflow-hidden select-none",
+                      "w-full h-full rounded-full flex items-center justify-center border transition-all overflow-hidden select-none",
                       isActive
-                        ? "border-primary bg-muted/60"
+                        ? "border-primary bg-muted/60 ring-2 ring-primary/60 shadow-lg shadow-primary/40"
                         : "border-border/50 bg-muted/40"
                     )}
                   >

package/components/composites/index.ts

@@ -285,3 +285,7 @@ export type { WorkspaceEmptyStateProps } from './WorkspaceEmptyState'
 export { StoriesBar } from './StoriesBar'
 export type { StoriesBarProps, StoryItem } from './StoriesBar'
 
+// ScenePlayer Composite
+export { ScenePlayer } from './ScenePlayer'
+export type { ScenePlayerProps, SceneItem } from './ScenePlayer'
+

package/components/features/ChatPanel/ChatPanel.stories.tsx

@@ -411,4 +411,26 @@ export const WithImageAndAudioAttachments: Story = {
   },
 };
 
+/**
+ * Sheet Presentation - Floating bottom-sheet modal overlay
+ */
+export const SheetPresentation: Story = {
+  args: {
+    variant: "sheet",
+    messages: inputStateMessages,
+    sessionTitle: "Video Generation Session",
+    placeholder: "Ask a question or describe a task...",
+    onSubmit: (msg: PromptInputMessage) => console.log("Submitted:", msg),
+    onClose: () => alert("Close sheet triggered"),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Floating bottom-sheet panel presentation with frosted backdrop blur overlay, elevated surface, and grab handle.",
+      },
+    },
+  },
+};
+
 

package/components/features/ChatPanel/ChatPanel.tsx

@@ -213,6 +213,18 @@ export interface ChatPanelProps {
    * @default true
    */
   showSessionActions?: boolean;
+  /**
+   * Presentation variant for ChatPanel:
+   * - "default": standard full flex-1 panel (default)
+   * - "sheet": elevated floating bottom-sheet panel with frosted backdrop blur overlay,
+   *   rounded surface, shadow, grab handle, and dismiss backdrop click.
+   * @default "default"
+   */
+  variant?: "default" | "sheet";
+  /**
+   * Callback fired when clicking the backdrop overlay or dismissing the sheet (when variant="sheet")
+   */
+  onClose?: () => void;
 }
 
 /**
@@ -260,6 +272,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     showHeader = true,
     sessionTitle,
     showSessionActions = true,
+    variant = "default",
+    onClose,
   }) => {
     // File change queue state
     const [fileChangeState, setFileChangeState] = React.useState<
@@ -411,8 +425,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
       );
     }, [loading, messages]);
 
-    return (
-      <div className={`relative flex h-full flex-col ${className || ""}`}>
+    const chatContent = (
+      <div className={cn("relative flex h-full flex-col", variant !== "sheet" && className)}>
         {/* Chat Session Header */}
         {showHeader && (
           <SessionHeader
@@ -470,6 +484,40 @@ export const ChatPanel = React.memo<ChatPanelProps>(
         </div>
       </div>
     );
+
+    if (variant === "sheet") {
+      return (
+        <div
+          className="absolute inset-0 z-50 flex flex-col justify-end backdrop-blur-md bg-black/60"
+          data-testid="story-chat-head-overlay"
+        >
+          <div
+            className="absolute inset-0 cursor-pointer"
+            onClick={onClose}
+            data-testid="story-chat-head-backdrop"
+            aria-label="Close sheet"
+          />
+          <div
+            className={cn(
+              "relative z-10 flex flex-col bg-card rounded-2xl border border-border shadow-2xl h-[85%] mx-4 mb-4 overflow-hidden",
+              className
+            )}
+            data-testid="story-chat-head-popup"
+          >
+            <div
+              className="w-9 h-1 rounded-full bg-muted-foreground/30 mx-auto mt-2.5 mb-1 shrink-0"
+              data-testid="story-sheet-handle"
+              aria-hidden="true"
+            />
+            <div className="flex-1 flex flex-col min-h-0">
+              {chatContent}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return chatContent;
   }
 );
 

package/components/index.ts

@@ -34,10 +34,13 @@ export {
   TaskQueue,
   SpeechInput,
   StoriesBar,
+  ScenePlayer,
 } from './composites';
 export type {
   StoriesBarProps,
   StoryItem,
+  ScenePlayerProps,
+  SceneItem,
   SpeechInputProps,
   ApprovalCardProps,
   ActionRequest,