@fragments-sdk/ui 0.9.4 → 0.9.6

package/src/components/Combobox/Combobox.module.scss

@@ -1,5 +1,5 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
 
 // Multi-select container — stacks input and chips vertically
 .multiContainer {
@@ -129,6 +129,7 @@
   cursor: pointer;
   border-radius: 0 var(--fui-radius-md, $fui-radius-md) var(--fui-radius-md, $fui-radius-md) 0;
   transition: color var(--fui-transition-fast, $fui-transition-fast);
+  margin-inline-end: 0.5rem;
 
   &:hover {
     color: var(--fui-text-primary, $fui-text-primary);
@@ -162,16 +163,16 @@
 
   // Item height derived from text-base font + vertical padding
   --_item-h: calc(
-    var(--fui-font-size-sm, #{$fui-font-size-sm}) * var(--fui-line-height-normal, #{$fui-line-height-normal}) +
-    var(--fui-space-2, #{$fui-space-2}) * 2
+    var(--fui-font-size-sm, #{$fui-font-size-sm}) *
+      var(--fui-line-height-normal, #{$fui-line-height-normal}) +
+      var(--fui-space-2, #{$fui-space-2}) * 2
   );
 
   min-width: var(--anchor-width);
   // Show N items + half-peek scroll hint (default 4.5 items)
   // !important needed to override Base UI's inline max-height: 100%
   max-height: calc(
-    var(--_item-h) * var(--fui-select-max-items, 4.5) +
-    var(--fui-space-1, #{$fui-space-1}) * 2
+    var(--_item-h) * var(--fui-select-max-items, 4.5) + var(--fui-space-1, #{$fui-space-1}) * 2
   ) !important;
   overflow-y: auto !important;
   padding: var(--fui-padding-item-xs, $fui-padding-item-xs);
@@ -206,7 +207,8 @@
   align-items: center;
   gap: var(--fui-space-2, $fui-space-2);
   width: 100%;
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs)
+    var(--fui-padding-item-md, $fui-padding-item-md);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   cursor: pointer;
   outline: none;
@@ -252,7 +254,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--fui-padding-item-lg, $fui-padding-item-lg) var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-padding-item-lg, $fui-padding-item-lg)
+    var(--fui-padding-item-md, $fui-padding-item-md);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
 }
@@ -268,7 +271,8 @@
 
 // Group label
 .groupLabel {
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs)
+    var(--fui-padding-item-md, $fui-padding-item-md);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-tertiary, $fui-text-tertiary);

package/src/components/ConversationList/ConversationList.fragment.tsx

@@ -1,201 +1,168 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { ConversationList } from '.';
-import { Message } from '../Message';
+import React from "react";
+import { defineFragment } from "@fragments-sdk/cli/core";
+import { ConversationList } from ".";
+import { Message } from "../Message";
 
 export default defineFragment({
   component: ConversationList,
 
   meta: {
-    name: 'ConversationList',
-    description: 'Scrollable message container with auto-scroll and history loading',
-    category: 'ai',
-    status: 'stable',
-    tags: ['conversation', 'chat', 'messages', 'scroll', 'ai', 'list'],
+    name: "ConversationList",
+    description: "Scrollable message container with auto-scroll and history loading",
+    category: "ai",
+    status: "stable",
+    tags: ["conversation", "chat", "messages", "scroll", "ai", "list"],
   },
 
   usage: {
     when: [
-      'Building a chat interface with multiple messages',
-      'Need auto-scroll behavior when new messages arrive',
-      'Require infinite scroll for loading message history',
-      'Want date separators between message groups',
+      "Building a chat interface with multiple messages",
+      "Need auto-scroll behavior when new messages arrive",
+      "Require infinite scroll for loading message history",
+      "Want date separators between message groups",
     ],
     whenNot: [
-      'Simple list of items without chat context (use List)',
-      'Single message display (use Message directly)',
-      'Non-scrolling message layout',
+      "Simple list of items without chat context (use List)",
+      "Single message display (use Message directly)",
+      "Non-scrolling message layout",
     ],
     guidelines: [
       'Use autoScroll="smart" for best UX (only auto-scrolls when near bottom)',
-      'Implement onScrollTop for loading older messages',
-      'Provide an emptyState for new conversations',
-      'Use DateSeparator between messages from different days',
+      "Implement onScrollTop for loading older messages",
+      "Provide an emptyState for new conversations",
+      "Use DateSeparator between messages from different days",
     ],
     accessibility: [
-      'Uses proper ARIA roles for separators',
-      'Typing indicator has aria-label',
-      'Smooth scroll respects reduced motion preferences',
-      'Keyboard navigation works within scrollable container',
+      "Uses proper ARIA roles for separators",
+      "Typing indicator has aria-label",
+      "Smooth scroll respects reduced motion preferences",
+      "Keyboard navigation works within scrollable container",
     ],
   },
 
   props: {
     children: {
-      type: 'node',
-      description: 'Message components',
+      type: "node",
+      description: "Message components",
       required: true,
     },
     autoScroll: {
-      type: 'union',
+      type: "union",
       default: '"smart"',
-      description: 'Auto-scroll behavior: true (always), false (never), or "smart" (only when near bottom)',
+      description:
+        'Auto-scroll behavior: true (always), false (never), or "smart" (only when near bottom)',
     },
     onScrollTop: {
-      type: 'function',
-      description: 'Callback when user scrolls to top (for loading history)',
+      type: "function",
+      description: "Callback when user scrolls to top (for loading history)",
     },
     loadingHistory: {
-      type: 'boolean',
-      default: 'false',
-      description: 'Show loading spinner at top when loading history',
+      type: "boolean",
+      default: "false",
+      description: "Show loading spinner at top when loading history",
     },
     emptyState: {
-      type: 'node',
-      description: 'Content to show when conversation is empty',
+      type: "node",
+      description: "Content to show when conversation is empty",
     },
     scrollTopThreshold: {
-      type: 'number',
-      default: '50',
-      description: 'Pixels from top to trigger onScrollTop',
+      type: "number",
+      default: "50",
+      description: "Pixels from top to trigger onScrollTop",
     },
     scrollBottomThreshold: {
-      type: 'number',
-      default: '100',
-      description: 'Pixels from bottom for smart auto-scroll',
+      type: "number",
+      default: "100",
+      description: "Pixels from bottom for smart auto-scroll",
     },
   },
 
   relations: [
     {
-      component: 'Message',
-      relationship: 'child',
-      note: 'ConversationList contains Message components',
+      component: "Message",
+      relationship: "child",
+      note: "ConversationList contains Message components",
     },
     {
-      component: 'ThinkingIndicator',
-      relationship: 'child',
-      note: 'Show ThinkingIndicator at bottom while awaiting response',
+      component: "ThinkingIndicator",
+      relationship: "child",
+      note: "Show ThinkingIndicator at bottom while awaiting response",
     },
     {
-      component: 'Prompt',
-      relationship: 'sibling',
-      note: 'Typically paired with Prompt for input',
+      component: "Prompt",
+      relationship: "sibling",
+      note: "Typically paired with Prompt for input",
     },
   ],
 
   contract: {
     propsSummary: [
-      'children: ReactNode - Message components',
+      "children: ReactNode - Message components",
       'autoScroll: boolean | "smart" - scroll behavior (default: "smart")',
-      'onScrollTop: () => void - callback for loading history',
-      'loadingHistory: boolean - show history loading spinner',
-      'emptyState: ReactNode - empty conversation content',
-    ],
-    scenarioTags: [
-      'ui.chat',
-      'ui.conversation',
-      'ai.assistant',
-      'layout.scroll',
-    ],
-    a11yRules: [
-      'A11Y_ARIA_ROLES',
-      'A11Y_MOTION_PREFERENCE',
+      "onScrollTop: () => void - callback for loading history",
+      "loadingHistory: boolean - show history loading spinner",
+      "emptyState: ReactNode - empty conversation content",
     ],
+    scenarioTags: ["ui.chat", "ui.conversation", "ai.assistant", "layout.scroll"],
+    a11yRules: ["A11Y_ARIA_ROLES", "A11Y_MOTION_PREFERENCE"],
     bans: [],
   },
 
   variants: [
     {
-      name: 'Basic',
-      description: 'Simple conversation with messages',
-      render: () => (
-        <div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>
-          <ConversationList>
-            <Message role="user">
-              <Message.Content>Hello!</Message.Content>
-            </Message>
-            <Message role="assistant">
-              <Message.Content>Hi there! How can I help you today?</Message.Content>
-            </Message>
-            <Message role="user">
-              <Message.Content>Can you explain React hooks?</Message.Content>
-            </Message>
-          </ConversationList>
-        </div>
-      ),
-    },
-    {
-      name: 'With Date Separators',
-      description: 'Messages grouped by date',
+      name: "Basic",
+      description: "Simple conversation with messages",
       render: () => (
-        <div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>
-          <ConversationList>
-            <ConversationList.DateSeparator date={new Date(Date.now() - 86400000)} />
-            <Message role="user">
-              <Message.Content>A message from yesterday</Message.Content>
-            </Message>
-            <ConversationList.DateSeparator date={new Date()} />
-            <Message role="assistant">
-              <Message.Content>And a message from today!</Message.Content>
-            </Message>
-          </ConversationList>
-        </div>
+        <ConversationList>
+          <Message role="user">
+            <Message.Content>Hello!</Message.Content>
+          </Message>
+          <Message role="assistant">
+            <Message.Content>Hi there! How can I help you today?</Message.Content>
+          </Message>
+          <Message role="user">
+            <Message.Content>Can you explain React hooks?</Message.Content>
+          </Message>
+        </ConversationList>
       ),
     },
     {
-      name: 'With Typing Indicator',
-      description: 'Shows assistant is typing',
+      name: "With Date Separators",
+      description: "Messages grouped by date",
       render: () => (
-        <div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>
-          <ConversationList>
-            <Message role="user">
-              <Message.Content>What is TypeScript?</Message.Content>
-            </Message>
-            <ConversationList.TypingIndicator name="Assistant" />
-          </ConversationList>
-        </div>
+        <ConversationList>
+          <ConversationList.DateSeparator date={new Date(Date.now() - 86400000)} />
+          <Message role="user">
+            <Message.Content>A message from yesterday</Message.Content>
+          </Message>
+          <ConversationList.DateSeparator date={new Date()} />
+          <Message role="assistant">
+            <Message.Content>And a message from today!</Message.Content>
+          </Message>
+        </ConversationList>
       ),
     },
     {
-      name: 'Loading History',
-      description: 'Loading older messages',
+      name: "With Typing Indicator",
+      description: "Shows assistant is typing",
       render: () => (
-        <div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>
-          <ConversationList loadingHistory>
-            <Message role="user">
-              <Message.Content>This is the latest message</Message.Content>
-            </Message>
-          </ConversationList>
-        </div>
+        <ConversationList>
+          <Message role="user">
+            <Message.Content>What is TypeScript?</Message.Content>
+          </Message>
+          <ConversationList.TypingIndicator name="Assistant" />
+        </ConversationList>
       ),
     },
     {
-      name: 'Empty State',
-      description: 'No messages yet',
+      name: "Loading History",
+      description: "Loading older messages",
       render: () => (
-        <div style={{ height: '300px', border: '1px solid #e4e4e7', borderRadius: '8px' }}>
-          <ConversationList
-            emptyState={
-              <div style={{ textAlign: 'center', color: '#71717a', padding: '2rem' }}>
-                <p>No messages yet</p>
-                <p style={{ fontSize: '12px' }}>Start a conversation!</p>
-              </div>
-            }
-          >
-            {/* No messages */}
-          </ConversationList>
-        </div>
+        <ConversationList loadingHistory>
+          <Message role="user">
+            <Message.Content>This is the latest message</Message.Content>
+          </Message>
+        </ConversationList>
       ),
     },
   ],