@trycompai/design-system 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/molecules/ai-chat.tsx

@@ -63,14 +63,24 @@ function AIChat({
 
   return (
     <>
-      {/* Chat Panel - persistent side panel, no backdrop */}
+      {/* Backdrop overlay */}
+      <div
+        data-slot="ai-chat-backdrop"
+        className={`fixed inset-0 z-20 bg-black/5 backdrop-blur-[2px] transition-opacity duration-300 ${
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={handleClose}
+      />
+      {/* Chat Panel - floating module */}
       <div
         data-slot="ai-chat-panel"
-        className={`fixed top-14 right-0 bottom-0 z-30 w-full max-w-md flex flex-col bg-background border-l border-border transition-transform duration-300 ease-out ${
-          isOpen ? 'translate-x-0' : 'translate-x-full'
+        className={`fixed top-16 right-3 bottom-3 z-30 w-full max-w-md flex flex-col bg-background/95 backdrop-blur-xl border border-border/50 rounded-2xl overflow-hidden transition-all duration-300 ease-out ring-1 ring-black/[0.03] dark:ring-white/[0.05] ${
+          isOpen ? 'translate-x-0 opacity-100 scale-100' : 'translate-x-2 opacity-0 scale-[0.98] pointer-events-none'
         }`}
         style={{
-          boxShadow: isOpen ? '-4px 0 24px -4px rgb(0 0 0 / 0.08)' : 'none',
+          boxShadow: isOpen
+            ? '0 24px 48px -12px rgb(0 0 0 / 0.15), 0 12px 24px -8px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.03)'
+            : 'none',
         }}
       >
         {children || <AIChatDefaultContent onClose={handleClose} />}
@@ -120,7 +130,7 @@ function AIChatTrigger({ onClick, isOpen, shortcut = 'J' }: AIChatTriggerProps)
 // Default content when no children provided
 function AIChatDefaultContent({ onClose }: { onClose: () => void }) {
   const [message, setMessage] = React.useState('');
-  const inputRef = React.useRef<HTMLInputElement>(null);
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
 
   // Focus input when panel opens
   React.useEffect(() => {
@@ -128,43 +138,62 @@ function AIChatDefaultContent({ onClose }: { onClose: () => void }) {
     return () => clearTimeout(timer);
   }, []);
 
+  // Auto-resize textarea
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(e.target.value);
+    e.target.style.height = 'auto';
+    e.target.style.height = `${Math.min(e.target.scrollHeight, 120)}px`;
+  };
+
   return (
     <>
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+      <div className="flex items-center justify-between px-5 py-4 border-b border-border/50 shrink-0 bg-muted/30">
         <div className="flex items-center gap-3">
-          <span className="flex size-9 items-center justify-center rounded-xl bg-primary/10 text-primary">
+          <span className="flex size-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 text-primary ring-1 ring-primary/10">
             <MagicWand className="size-5" />
           </span>
           <div>
             <div className="font-semibold text-sm">AI Assistant</div>
-            <div className="text-xs text-muted-foreground">Ask me anything about your compliance</div>
+            <div className="text-xs text-muted-foreground">Powered by Claude</div>
           </div>
         </div>
         <button
           type="button"
           onClick={onClose}
-          className="size-8 flex items-center justify-center rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+          className="size-8 flex items-center justify-center rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
         >
           <Close className="size-4" />
         </button>
       </div>
 
       {/* Messages Area */}
-      <div className="flex-1 overflow-auto p-4">
+      <div className="flex-1 overflow-auto p-5">
         <div className="flex flex-col gap-4">
           {/* AI Welcome Message */}
           <div className="flex gap-3">
-            <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-primary/15 to-primary/5 text-primary">
               <MagicWand className="size-4" />
             </span>
-            <div className="flex-1 rounded-2xl rounded-tl-md bg-muted px-4 py-3 text-sm">
-              <p className="mb-2">Hi! I can help you with:</p>
-              <ul className="space-y-1 text-muted-foreground">
-                <li>Understanding compliance requirements</li>
-                <li>Reviewing and creating policies</li>
-                <li>Analyzing evidence and controls</li>
-                <li>Answering questions about SOC 2, ISO 27001, and more</li>
+            <div className="flex-1 rounded-2xl rounded-tl-lg bg-muted/50 ring-1 ring-border/50 px-4 py-3 text-sm">
+              <p className="mb-3 font-medium">Hi! I can help you with:</p>
+              <ul className="space-y-2 text-muted-foreground">
+                <li className="flex items-start gap-2">
+                  <span className="size-1.5 rounded-full bg-primary/60 mt-1.5 shrink-0" />
+                  <span>Understanding compliance requirements</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="size-1.5 rounded-full bg-primary/60 mt-1.5 shrink-0" />
+                  <span>Reviewing and creating policies</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="size-1.5 rounded-full bg-primary/60 mt-1.5 shrink-0" />
+                  <span>Analyzing evidence and controls</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="size-1.5 rounded-full bg-primary/60 mt-1.5 shrink-0" />
+                  <span>Answering questions about SOC 2, ISO 27001, and more</span>
+                </li>
               </ul>
             </div>
           </div>
@@ -172,31 +201,35 @@ function AIChatDefaultContent({ onClose }: { onClose: () => void }) {
       </div>
 
       {/* Input Area */}
-      <div className="p-4 border-t border-border shrink-0">
-        <div className="flex items-center gap-2 rounded-xl bg-muted px-4 py-2.5">
-          <input
+      <div className="p-4 border-t border-border/50 shrink-0 bg-muted/20">
+        <div className="flex items-end gap-2 rounded-xl bg-background ring-1 ring-border/50 px-4 py-3 focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/30 transition-all">
+          <textarea
             ref={inputRef}
-            type="text"
             value={message}
-            onChange={(e) => setMessage(e.target.value)}
-            placeholder="Ask a question..."
-            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            onChange={handleTextareaChange}
+            placeholder="Ask anything..."
+            rows={1}
+            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground resize-none min-h-[24px] max-h-[120px]"
             onKeyDown={(e) => {
-              if (e.key === 'Enter' && message.trim()) {
+              if (e.key === 'Enter' && !e.shiftKey && message.trim()) {
+                e.preventDefault();
                 // Handle send
                 setMessage('');
+                if (inputRef.current) {
+                  inputRef.current.style.height = 'auto';
+                }
               }
             }}
           />
           <button
             type="button"
             disabled={!message.trim()}
-            className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-primary shadow-sm"
           >
             <Send className="size-4" />
           </button>
         </div>
-        <div className="mt-3 flex items-center justify-center gap-2 text-xs text-muted-foreground">
+        <div className="mt-3 flex items-center justify-center gap-2 text-xs text-muted-foreground/70">
           <Keyboard className="size-3" />
           <span>Press <Kbd>Esc</Kbd> to close</span>
         </div>

package/src/components/molecules/card.tsx

@@ -156,7 +156,7 @@ function CardFooter({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>
   return (
     <div
       data-slot="card-footer"
-      className="bg-muted rounded-b-md border-t p-4 group-data-[size=sm]/card:p-3 flex items-center"
+      className="bg-muted rounded-b-md border-t p-4 group-data-[size=sm]/card:p-3 flex items-center justify-between gap-4"
       {...props}
     />
   );

package/src/components/molecules/page-header.tsx

@@ -20,6 +20,7 @@ interface PageHeaderProps extends Omit<React.ComponentProps<'div'>, 'className'>
 function PageHeader({ title, actions, breadcrumbs, backHref, backLabel = 'Back', tabs, children, ...props }: PageHeaderProps) {
   const childArray = React.Children.toArray(children);
   const extractedActionChildren: React.ReactNode[] = [];
+  const extractedDescriptionChildren: React.ReactNode[] = [];
 
   childArray.forEach((child) => {
     if (
@@ -30,6 +31,14 @@ function PageHeader({ title, actions, breadcrumbs, backHref, backLabel = 'Back',
     ) {
       extractedActionChildren.push((child.props as { children?: React.ReactNode }).children);
     }
+    if (
+      React.isValidElement(child) &&
+      (child.type === PageHeaderDescription ||
+        (typeof child.type === 'function' &&
+          (child.type as unknown as { __pageHeaderSlot?: string }).__pageHeaderSlot === 'description'))
+    ) {
+      extractedDescriptionChildren.push(child);
+    }
   });
 
   const resolvedActions =
@@ -69,6 +78,9 @@ function PageHeader({ title, actions, breadcrumbs, backHref, backLabel = 'Back',
         )}
       </div>
 
+      {/* Description section */}
+      {extractedDescriptionChildren.length > 0 && extractedDescriptionChildren}
+
       {/* Tabs section */}
       {tabs && (
         <div className="mt-2 -mb-px">
@@ -85,7 +97,14 @@ function PageHeaderActions({ ...props }: Omit<React.ComponentProps<'div'>, 'clas
   );
 }
 
+function PageHeaderDescription({ ...props }: Omit<React.ComponentProps<'p'>, 'className'>) {
+  return (
+    <p data-slot="page-header-description" className="text-sm text-muted-foreground" {...props} />
+  );
+}
+
 // Mark compound slots so PageHeader can detect them even if module instances differ.
 (PageHeaderActions as unknown as { __pageHeaderSlot?: string }).__pageHeaderSlot = 'actions';
+(PageHeaderDescription as unknown as { __pageHeaderSlot?: string }).__pageHeaderSlot = 'description';
 
-export { PageHeader, PageHeaderActions };
+export { PageHeader, PageHeaderActions, PageHeaderDescription };

package/src/components/organisms/page-layout.tsx

@@ -12,14 +12,14 @@ const pageLayoutVariants = cva('min-h-full bg-background text-foreground', {
     },
     padding: {
       none: '',
-      sm: 'px-4',
-      default: 'px-4 sm:px-6 lg:px-8',
-      lg: 'px-6 sm:px-8 lg:px-12',
+      sm: 'px-1.5 sm:px-2',
+      default: 'px-1.5 sm:px-2 md:px-3 lg:px-4',
+      lg: 'px-2 sm:px-3 md:px-4 lg:px-6',
     },
   },
   defaultVariants: {
     variant: 'default',
-    padding: 'default',
+    padding: 'none',
   },
 });
 
@@ -34,7 +34,7 @@ const containerVariants = cva('mx-auto w-full', {
     },
   },
   defaultVariants: {
-    maxWidth: 'xl',
+    maxWidth: '2xl',
   },
 });
 
@@ -60,7 +60,7 @@ function PageLayout({
   ...props
 }: PageLayoutProps) {
   // For center variant, default to smaller max-width (sm) for auth-style pages
-  const resolvedMaxWidth = maxWidth ?? (variant === 'center' ? 'sm' : 'lg');
+  const resolvedMaxWidth = maxWidth ?? (variant === 'center' ? 'sm' : 'xl');
 
   const content = (
     <Stack gap={gap}>