ai-design-system 0.1.98 → 0.1.99

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/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/dist/index.cjs

@@ -8042,7 +8042,9 @@ var ChatPanel = React3__namespace.memo(
     enableSpeech = true,
     showHeader = true,
     sessionTitle,
-    showSessionActions = true
+    showSessionActions = true,
+    variant = "default",
+    onClose
   }) => {
     const [fileChangeState, setFileChangeState] = React3__namespace.useState("approval-requested");
     const [approval, setApproval] = React3__namespace.useState({});
@@ -8160,7 +8162,7 @@ var ChatPanel = React3__namespace.memo(
         }
       );
     }, [loading, messages]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full flex-col ${className || ""}`, children: [
+    const chatContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex h-full flex-col", variant !== "sheet" && className), children: [
       showHeader && /* @__PURE__ */ jsxRuntime.jsx(
         SessionHeader,
         {
@@ -8221,6 +8223,48 @@ var ChatPanel = React3__namespace.memo(
         )
       ] })
     ] });
+    if (variant === "sheet") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "absolute inset-0 z-50 flex flex-col justify-end backdrop-blur-md bg-black/60",
+          "data-testid": "story-chat-head-overlay",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute inset-0 cursor-pointer",
+                onClick: onClose,
+                "data-testid": "story-chat-head-backdrop",
+                "aria-label": "Close sheet"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "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",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "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"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex flex-col min-h-0", children: chatContent })
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
+    return chatContent;
   }
 );
 ChatPanel.displayName = "ChatPanel";
@@ -14421,6 +14465,7 @@ function getStoryStatusStyle(status) {
 var StoriesBar = React3__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { stories, activeStoryId, onStoryClick, defaultIcon = "clapperboard", className } = _b, props = __objRest(_b, ["stories", "activeStoryId", "onStoryClick", "defaultIcon", "className"]);
+    const hasActiveStory = Boolean(activeStoryId);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       __spreadProps(__spreadValues({
@@ -14438,7 +14483,10 @@ var StoriesBar = React3__namespace.forwardRef(
             {
               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}`,
               children: [
@@ -14447,8 +14495,8 @@ var StoriesBar = React3__namespace.forwardRef(
                     "div",
                     {
                       className: cn(
-                        "w-full h-full rounded-full flex items-center justify-center border transition-colors overflow-hidden select-none",
-                        isActive ? "border-primary bg-muted/60" : "border-border/50 bg-muted/40"
+                        "w-full h-full rounded-full flex items-center justify-center border transition-all overflow-hidden select-none",
+                        isActive ? "border-primary bg-muted/60 ring-2 ring-primary/60 shadow-lg shadow-primary/40" : "border-border/50 bg-muted/40"
                       ),
                       children: story.thumbnailUrl ? /* @__PURE__ */ jsxRuntime.jsx(
                         "img",