ai-design-system 0.1.72 → 0.1.73

package/components/ai-elements/file-tree.tsx

@@ -142,19 +142,13 @@ export const FileTreeFolder = ({
   children,
   ...props
 }: FileTreeFolderProps) => {
-  const { expandedPaths, togglePath, selectedPath, onSelect } =
-    useContext(FileTreeContext);
+  const { expandedPaths, togglePath } = useContext(FileTreeContext);
   const isExpanded = expandedPaths.has(path);
-  const isSelected = selectedPath === path;
 
   const handleOpenChange = useCallback(() => {
     togglePath(path);
   }, [togglePath, path]);
 
-  const handleSelect = useCallback(() => {
-    onSelect?.(path);
-  }, [onSelect, path]);
-
   const folderContextValue = useMemo(
     () => ({ isExpanded, name, path }),
     [isExpanded, name, path]
@@ -169,30 +163,16 @@ export const FileTreeFolder = ({
           tabIndex={0}
           {...props}
         >
-          <div
-            className={cn(
-              "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
-              isSelected && "bg-muted"
-            )}
-          >
-            <CollapsibleTrigger asChild>
-              <button
-                className="flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0"
-                type="button"
-              >
-                <ChevronRightIcon
-                  className={cn(
-                    "size-4 shrink-0 text-muted-foreground transition-transform",
-                    isExpanded && "rotate-90"
-                  )}
-                />
-              </button>
-            </CollapsibleTrigger>
-            <button
-              className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left"
-              onClick={handleSelect}
-              type="button"
+          <CollapsibleTrigger asChild>
+            <div
+              className="flex w-full cursor-pointer items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50 select-none"
             >
+              <ChevronRightIcon
+                className={cn(
+                  "size-4 shrink-0 text-muted-foreground transition-transform",
+                  isExpanded && "rotate-90"
+                )}
+              />
               <FileTreeIcon>
                 {isExpanded ? (
                   <FolderOpenIcon className="size-4 text-blue-500" />
@@ -201,8 +181,8 @@ export const FileTreeFolder = ({
                 )}
               </FileTreeIcon>
               <FileTreeName>{name}</FileTreeName>
-            </button>
-          </div>
+            </div>
+          </CollapsibleTrigger>
           <CollapsibleContent>
             <div className="ml-4 border-l pl-2">{children}</div>
           </CollapsibleContent>

package/components/ai-elements/node.tsx

@@ -88,3 +88,35 @@ export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
     {...props}
   />
 );
+
+export function getHighlightIconColor(
+  status?: string,
+  highlightStatus?: string,
+  defaultColorClass: string = "text-primary"
+): string {
+  const effectiveHighlight =
+    highlightStatus ??
+    (status === "success" || status === "completed" || status === "done"
+      ? "done"
+      : status === "pending_hitl" || status === "pending"
+      ? "pending"
+      : status === "running" || status === "active"
+      ? "active"
+      : status === "error" || status === "failed"
+      ? "error"
+      : undefined);
+
+  switch (effectiveHighlight) {
+    case "done":
+      return "text-green-500";
+    case "pending":
+      return "text-amber-500";
+    case "active":
+      return "text-indigo-400";
+    case "error":
+      return "text-red-500";
+    default:
+      return defaultColorClass;
+  }
+}
+

package/components/ai-elements/prompt-input.tsx

@@ -963,22 +963,26 @@ export const PromptInputSubmit = ({
   ...props
 }: PromptInputSubmitProps) => {
   let Icon = <SendIcon className="size-4" />;
+  let buttonVariant = variant;
+  let customClass = className;
 
   if (status === "submitted") {
     Icon = <Loader2Icon className="size-4 animate-spin" />;
   } else if (status === "streaming") {
-    Icon = <SquareIcon className="size-4" />;
+    Icon = <SquareIcon className="size-3.5 fill-current" />;
+    buttonVariant = "default";
+    customClass = cn("rounded-full", className);
   } else if (status === "error") {
     Icon = <XIcon className="size-4" />;
   }
 
   return (
     <InputGroupButton
-      aria-label="Submit"
-      className={cn(className)}
+      aria-label={status === "streaming" ? "Stop" : "Submit"}
+      className={customClass}
       size={size}
       type="submit"
-      variant={variant}
+      variant={buttonVariant}
       {...props}
     >
       {children ?? Icon}

package/components/ai-elements/tool.tsx

@@ -36,6 +36,8 @@ import type { ComponentProps, ReactNode } from "react";
 import { isValidElement } from "react";
 import { CodeBlock } from "./code-block";
 
+import { Shimmer } from "@/components/ai-elements/shimmer";
+
 export type ToolProps = ComponentProps<typeof Collapsible>;
 
 export const Tool = ({ className, ...props }: ToolProps) => (
@@ -65,7 +67,7 @@ const getStatusBadge = (status: ToolUIPart["state"]) => {
 
   const icons: Record<ToolUIPart["state"], ReactNode> = {
     "input-streaming": <CircleIcon className="size-4" />,
-    "input-available": <ClockIcon className="size-4 animate-pulse" />,
+    "input-available": <ClockIcon className="size-4 animate-spin text-primary" />,
     "approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
     "approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
     "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
@@ -73,10 +75,22 @@ const getStatusBadge = (status: ToolUIPart["state"]) => {
     "output-denied": <XCircleIcon className="size-4 text-orange-600" />,
   };
 
+  const isRunning = status === "input-available";
+
   return (
-    <Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
+    <Badge
+      className={cn(
+        "gap-1.5 rounded-full text-xs font-medium transition-all relative overflow-hidden",
+        isRunning && "border border-primary/30 bg-primary/10 text-primary shadow-xs"
+      )}
+      variant={isRunning ? "outline" : "secondary"}
+    >
       {icons[status]}
-      {labels[status]}
+      {isRunning ? (
+        <Shimmer className="text-xs font-medium text-foreground inline-block">Running</Shimmer>
+      ) : (
+        labels[status]
+      )}
     </Badge>
   );
 };

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -16,6 +16,7 @@ import { Panel } from "@/components/ai-elements/panel";
 import { StateNode } from "@/components/composites/StateNode";
 import { TransitionNode } from "@/components/composites/TransitionNode";
 import { TriggerNode } from "@/components/composites/TriggerNode";
+import { SpatialContainerNode } from "@/components/composites/SpatialContainerNode";
 import type { WorkflowCanvasProps, WorkflowEdge } from "./interfaces";
 import "@xyflow/react/dist/style.css";
 
@@ -29,6 +30,7 @@ const nodeTypes = {
   state: StateNode,
   transition: TransitionNode,
   trigger: TriggerNode,
+  spatialContainer: SpatialContainerNode,
 };
 
 function WorkflowCanvasInner({

package/components/blocks/WorkflowCanvas/interfaces.ts

@@ -3,8 +3,13 @@ import type React from "react";
 import type { StateNodeData } from "@/components/composites/StateNode";
 import type { TransitionNodeData } from "@/components/composites/TransitionNode";
 import type { TriggerNodeData } from "@/components/composites/TriggerNode";
+import type { SpatialContainerNodeData } from "@/components/composites/SpatialContainerNode";
 
-export type WorkflowNodeData = StateNodeData | TransitionNodeData | TriggerNodeData;
+export type WorkflowNodeData =
+  | StateNodeData
+  | TransitionNodeData
+  | TriggerNodeData
+  | SpatialContainerNodeData;
 export type WorkflowNode = Node<WorkflowNodeData>;
 
 export interface WorkflowEdge {

package/components/composites/ApprovalCard/ApprovalCard.tsx

@@ -13,6 +13,7 @@ import {
   ConfirmationActions,
   ConfirmationAction,
 } from "@/components/ai-elements/confirmation";
+import { StreamingMarkdown } from "@/components/composites/StreamingMarkdown";
 
 export interface ActionRequest {
   name: string;
@@ -209,10 +210,14 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
           className={cn("w-full", className)}
         >
           <ConfirmationTitle>
-            <div className="flex items-start justify-between gap-4 select-none">
-              <div className="flex items-start gap-3">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex items-start gap-3 min-w-0 flex-1">
                 <QuestionIcon className="h-5 w-5 text-muted-foreground mt-0.5 flex-shrink-0" />
-                <span>{currentQuestion.question}</span>
+                <div className="flex-1 min-w-0 max-h-60 overflow-y-auto pr-1 text-sm leading-relaxed text-foreground [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+                  <StreamingMarkdown controls={false}>
+                    {currentQuestion.question}
+                  </StreamingMarkdown>
+                </div>
               </div>
               {questions.length > 1 && (
                 <div className="flex items-center gap-1.5 text-xs text-muted-foreground flex-shrink-0 font-normal">

package/components/composites/DefaultSwitcher/DefaultSwitcher.tsx

@@ -66,7 +66,11 @@ export const DefaultSwitcher = React.memo<DefaultSwitcherProps>(
         </SelectTrigger>
         <SelectContent>
           {themes.map((theme) => (
-            <SelectItem key={theme.value} value={theme.value}>
+            <SelectItem 
+              key={theme.value} 
+              value={theme.value}
+              onClick={() => onValueChange?.(theme.value)}
+            >
               {theme.label}
             </SelectItem>
           ))}

package/components/composites/PromptInput/PromptInput.tsx

@@ -32,6 +32,7 @@ export interface PromptInputBlockProps
   ) => void | Promise<void>;
   dialog?: ReactNode;
   loading?: boolean;
+  onStop?: () => void;
 }
 
 export const PromptInput = React.memo<PromptInputBlockProps>(
@@ -43,17 +44,21 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
     onSubmit,
     dialog,
     loading = false,
+    onStop,
     ...props
   }) => {
     const handleSubmit = React.useCallback(
       (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => {
-        if (disabled) {
+        if (disabled || (loading && onStop)) {
           event.preventDefault();
+          if (loading && onStop) {
+            onStop();
+          }
           return;
         }
         onSubmit(message, event);
       },
-      [disabled, onSubmit]
+      [disabled, loading, onStop, onSubmit]
     );
 
     const isControlled = value !== undefined && onChange !== undefined;
@@ -71,22 +76,28 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
       return <>{dialog}</>;
     }
 
+    const isStopping = loading && Boolean(onStop);
+
     const promptInputContent = (
       <AIPromptInput onSubmit={handleSubmit} {...props}>
         <PromptInputBody>
           <PromptInputTextarea
             placeholder={placeholder}
-            disabled={false}
+            disabled={disabled}
             onChange={isControlled ? handleControlledChange : undefined}
           />
         </PromptInputBody>
         <PromptInputFooter>
           <PromptInputTools>
-            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full" type="button" disabled={disabled}>
+            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full" type="button" disabled={disabled || loading}>
               <Icon name="plus" size="sm" />
             </Button>
           </PromptInputTools>
-          <PromptInputSubmit disabled={disabled} status={loading ? "submitted" : undefined} />
+          <PromptInputSubmit
+            disabled={disabled || (loading && !onStop)}
+            status={loading ? (onStop ? "streaming" : "submitted") : undefined}
+            onClick={isStopping ? (e: React.MouseEvent) => { e.preventDefault(); onStop?.(); } : undefined}
+          />
         </PromptInputFooter>
       </AIPromptInput>
     );

package/components/composites/SpatialContainerNode/SpatialContainerNode.stories.tsx

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { SpatialContainerNode } from "./SpatialContainerNode";
+
+/**
+ * SpatialContainerNode Composite Stories
+ *
+ * SpatialContainerNode represents a 2.5D visual container or spatial grid region
+ * in node editors and workflow canvas components. It acts as a parent node for grouping
+ * sub-nodes, cards, and sticky notes inside defined spatial domains.
+ *
+ * ## Features
+ * - 2.5D Extruded 3D visual styling, flat border regions, or glassmorphism aesthetics
+ * - Built-in Resizer (`NodeResizer`) for interactive sizing
+ * - Themed color variants (Blue, Indigo, Emerald, Amber, Purple, Rose, Cyan, Slate)
+ * - Category badges and node action toolbars
+ * - Built-in connection handles for inter-container relationship routing
+ */
+const meta = {
+  title: "Composites/SpatialContainerNode",
+  component: SpatialContainerNode,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Visual container node for grouping sub-nodes in spatial layouts, Business Model Canvas grids, and architectural region diagrams.",
+      },
+    },
+  },
+} satisfies Meta<typeof SpatialContainerNode>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    id: "container-1",
+    selected: false,
+    width: 340,
+    height: 220,
+    data: {
+      label: "Value Propositions",
+      description: "Core products, services, and bundle offerings for target customers",
+      type: "spatialContainer",
+      themeColor: "indigo",
+      variant: "extruded3d",
+      icon: "box",
+      badgeText: "3 Services",
+    },
+  },
+};
+
+export const Extruded3D: Story = {
+  args: {
+    id: "container-2",
+    selected: true,
+    width: 340,
+    height: 220,
+    data: {
+      label: "Key Activities",
+      description: "Production, problem-solving, and platform maintenance tasks",
+      type: "spatialContainer",
+      themeColor: "emerald",
+      variant: "extruded3d",
+      icon: "activity",
+      badgeText: "Active",
+    },
+  },
+};
+
+export const Glassmorphism: Story = {
+  args: {
+    id: "container-3",
+    selected: false,
+    width: 340,
+    height: 220,
+    data: {
+      label: "Customer Relationships",
+      description: "Automated onboarding, dedicated personal assistance, and community support",
+      type: "spatialContainer",
+      themeColor: "purple",
+      variant: "glassmorphism",
+      icon: "heart",
+      badgeText: "High Touch",
+    },
+  },
+};
+
+export const FlatRegion: Story = {
+  args: {
+    id: "container-4",
+    selected: false,
+    width: 340,
+    height: 220,
+    data: {
+      label: "Cost Structure",
+      description: "Fixed cloud infrastructure, developer salaries, and R&D licenses",
+      type: "spatialContainer",
+      themeColor: "rose",
+      variant: "flat",
+      icon: "wallet",
+      badgeText: "$120k/mo",
+    },
+  },
+};
+
+export const ColorVariants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6 p-4">
+      <SpatialContainerNode
+        id="c-blue"
+        selected={false}
+        width={300}
+        height={180}
+        data={{
+          label: "Key Partners",
+          type: "spatialContainer",
+          themeColor: "blue",
+          variant: "extruded3d",
+          icon: "handshake",
+          badgeText: "Suppliers",
+        }}
+      />
+      <SpatialContainerNode
+        id="c-emerald"
+        selected={false}
+        width={300}
+        height={180}
+        data={{
+          label: "Key Resources",
+          type: "spatialContainer",
+          themeColor: "emerald",
+          variant: "extruded3d",
+          icon: "database",
+          badgeText: "Assets",
+        }}
+      />
+      <SpatialContainerNode
+        id="c-amber"
+        selected={false}
+        width={300}
+        height={180}
+        data={{
+          label: "Channels",
+          type: "spatialContainer",
+          themeColor: "amber",
+          variant: "extruded3d",
+          icon: "truck",
+          badgeText: "Distribution",
+        }}
+      />
+      <SpatialContainerNode
+        id="c-purple"
+        selected={false}
+        width={300}
+        height={180}
+        data={{
+          label: "Customer Segments",
+          type: "spatialContainer",
+          themeColor: "purple",
+          variant: "extruded3d",
+          icon: "users",
+          badgeText: "B2B & B2C",
+        }}
+      />
+    </div>
+  ),
+};