@fragments-sdk/ui 0.6.5 → 0.7.1

package/src/components/Markdown/Markdown.module.scss

@@ -0,0 +1,219 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+// ============================================
+// Markdown Prose Container
+// ============================================
+
+.markdown {
+  @include text-base;
+  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+  word-wrap: break-word;
+  color: var(--fui-text-primary, $fui-text-primary);
+
+  // ----------------------------------------
+  // Headings
+  // ----------------------------------------
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: var(--fui-space-4, $fui-space-4);
+    margin-bottom: var(--fui-space-2, $fui-space-2);
+    font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+    line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+    color: var(--fui-text-primary, $fui-text-primary);
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 {
+    font-size: var(--fui-font-size-2xl, $fui-font-size-2xl);
+  }
+
+  h2 {
+    font-size: var(--fui-font-size-xl, $fui-font-size-xl);
+  }
+
+  h3 {
+    font-size: var(--fui-font-size-lg, $fui-font-size-lg);
+  }
+
+  h4 {
+    font-size: var(--fui-font-size-base, $fui-font-size-base);
+  }
+
+  h5,
+  h6 {
+    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  }
+
+  // ----------------------------------------
+  // Paragraphs
+  // ----------------------------------------
+
+  p {
+    margin: 0;
+
+    & + p {
+      margin-top: var(--fui-space-2, $fui-space-2);
+    }
+  }
+
+  // ----------------------------------------
+  // Links
+  // ----------------------------------------
+
+  a {
+    color: var(--fui-color-accent, $fui-color-accent);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  // ----------------------------------------
+  // Lists
+  // ----------------------------------------
+
+  ul,
+  ol {
+    margin: var(--fui-space-2, $fui-space-2) 0;
+    padding-left: var(--fui-space-4, $fui-space-4);
+  }
+
+  li {
+    margin-bottom: var(--fui-space-1, $fui-space-1);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Nested lists
+  li > ul,
+  li > ol {
+    margin-top: var(--fui-space-1, $fui-space-1);
+    margin-bottom: 0;
+  }
+
+  // ----------------------------------------
+  // Inline Code
+  // ----------------------------------------
+
+  code {
+    font-family: var(--fui-font-mono, $fui-font-mono);
+    font-size: 0.9em;
+    padding: 0.125em 0.375em;
+    border-radius: var(--fui-radius-sm, $fui-radius-sm);
+    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+  }
+
+  // ----------------------------------------
+  // Code Blocks
+  // ----------------------------------------
+
+  pre {
+    margin: var(--fui-space-2, $fui-space-2) 0;
+    padding: var(--fui-space-2, $fui-space-2);
+    border-radius: var(--fui-radius-md, $fui-radius-md);
+    background-color: var(--fui-code-bg, $fui-code-bg);
+    overflow-x: auto;
+
+    code {
+      padding: 0;
+      background: none;
+      font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+    }
+  }
+
+  // ----------------------------------------
+  // Blockquotes
+  // ----------------------------------------
+
+  blockquote {
+    margin: var(--fui-space-2, $fui-space-2) 0;
+    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+    border-left: 3px solid var(--fui-border, $fui-border);
+    color: var(--fui-text-secondary, $fui-text-secondary);
+
+    p {
+      margin: 0;
+    }
+  }
+
+  // ----------------------------------------
+  // Horizontal Rule
+  // ----------------------------------------
+
+  hr {
+    margin: var(--fui-space-4, $fui-space-4) 0;
+    border: none;
+    border-top: 1px solid var(--fui-border, $fui-border);
+  }
+
+  // ----------------------------------------
+  // Tables (GFM)
+  // ----------------------------------------
+
+  table {
+    width: 100%;
+    margin: var(--fui-space-2, $fui-space-2) 0;
+    border-collapse: collapse;
+    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  }
+
+  th,
+  td {
+    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+    border: 1px solid var(--fui-border, $fui-border);
+    text-align: left;
+  }
+
+  th {
+    font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+    background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  }
+
+  // ----------------------------------------
+  // Images
+  // ----------------------------------------
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--fui-radius-md, $fui-radius-md);
+  }
+
+  // ----------------------------------------
+  // Task Lists (GFM)
+  // ----------------------------------------
+
+  input[type='checkbox'] {
+    margin-right: var(--fui-space-1, $fui-space-1);
+  }
+
+  // ----------------------------------------
+  // Strong & Emphasis
+  // ----------------------------------------
+
+  strong {
+    font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+  }
+
+  // Remove top margin from first child and bottom margin from last child
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}

package/src/components/Markdown/index.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import * as React from 'react';
+import styles from './Markdown.module.scss';
+import '../../styles/globals.scss';
+
+// ============================================
+// Types
+// ============================================
+
+export interface MarkdownProps {
+  /** Markdown string to render */
+  content: string;
+  /** Override map for markdown element components */
+  components?: Record<string, React.ComponentType<React.HTMLAttributes<HTMLElement>>>;
+  /** Additional class name */
+  className?: string;
+}
+
+// ============================================
+// Lazy-loaded react-markdown
+// ============================================
+
+type ReactMarkdownType = React.ComponentType<{
+  children: string;
+  remarkPlugins?: unknown[];
+  components?: Record<string, React.ComponentType<unknown>>;
+}>;
+
+let ReactMarkdown: ReactMarkdownType | null = null;
+let remarkGfm: unknown = null;
+let loadAttempted = false;
+let loadFailed = false;
+
+function loadDeps() {
+  if (loadAttempted) return;
+  loadAttempted = true;
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    ReactMarkdown = require('react-markdown').default || require('react-markdown');
+  } catch {
+    loadFailed = true;
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    remarkGfm = require('remark-gfm').default || require('remark-gfm');
+  } catch {
+    // remark-gfm is optional; markdown still works without it
+  }
+}
+
+// ============================================
+// Fallback renderer (plain text with paragraphs)
+// ============================================
+
+function FallbackRenderer({ content, className }: { content: string; className?: string }) {
+  const paragraphs = content.split(/\n{2,}/);
+  return (
+    <div className={className}>
+      {paragraphs.map((p, i) => (
+        <p key={i}>{p}</p>
+      ))}
+    </div>
+  );
+}
+
+// ============================================
+// Component
+// ============================================
+
+export const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
+  function Markdown({ content, components: componentOverrides, className }, ref) {
+    loadDeps();
+
+    const classes = [styles.markdown, className].filter(Boolean).join(' ');
+
+    if (loadFailed || !ReactMarkdown) {
+      if (loadFailed && process.env.NODE_ENV === 'development') {
+        console.warn(
+          '[@fragments-sdk/ui] Markdown: react-markdown is not installed. ' +
+          'Install it with: npm install react-markdown remark-gfm'
+        );
+      }
+      return (
+        <div ref={ref} className={classes}>
+          <FallbackRenderer content={content} />
+        </div>
+      );
+    }
+
+    const plugins = remarkGfm ? [remarkGfm] : [];
+
+    return (
+      <div ref={ref} className={classes}>
+        <ReactMarkdown
+          remarkPlugins={plugins}
+          components={componentOverrides as Record<string, React.ComponentType<unknown>>}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
+    );
+  }
+);

package/src/components/Message/index.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import styles from './Message.module.scss';
 import '../../styles/globals.scss';
+import { Markdown } from '../Markdown';
 
 // ============================================
 // Types
@@ -28,6 +29,8 @@ export interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
+  /** When true, renders string children as markdown */
+  markdown?: boolean;
 }
 
 export interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -140,7 +143,7 @@ function SystemIcon() {
 // Sub-components
 // ============================================
 
-function MessageContent({ children, className, ...htmlProps }: MessageContentProps) {
+function MessageContent({ children, markdown, className, ...htmlProps }: MessageContentProps) {
   const { status } = useMessageContext();
 
   const classes = [
@@ -149,9 +152,13 @@ function MessageContent({ children, className, ...htmlProps }: MessageContentPro
     className,
   ].filter(Boolean).join(' ');
 
+  const content = markdown && typeof children === 'string'
+    ? <Markdown content={children} />
+    : children;
+
   return (
     <div {...htmlProps} className={classes}>
-      {children}
+      {content}
     </div>
   );
 }

package/src/components/Prompt/index.tsx

@@ -50,7 +50,7 @@ export interface PromptToolbarProps {
 }
 
 export interface PromptActionsProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
 }
 
@@ -313,6 +313,7 @@ function PromptToolbar({ children, className }: PromptToolbarProps) {
 }
 
 function PromptActions({ children, className }: PromptActionsProps) {
+  if (!children) return null;
   const classes = [styles.actions, className].filter(Boolean).join(' ');
   return <div className={classes}>{children}</div>;
 }

package/src/components/Stack/Stack.fragment.tsx

@@ -72,6 +72,10 @@ export default defineSegment({
       description: 'Allow items to wrap',
       default: 'false',
     },
+    separator: {
+      type: 'custom',
+      description: 'Render a separator between children. true = default 1px line, or pass a ReactNode for custom separators.',
+    },
     as: {
       type: 'enum',
       description: 'HTML element to render',
@@ -93,6 +97,7 @@ export default defineSegment({
       'align: start|center|end|stretch|baseline - cross-axis',
       'justify: start|center|end|between - main-axis',
       'wrap: boolean - allow wrapping',
+      'separator: boolean|ReactNode - divider between children',
       'as: string - HTML element',
     ],
     scenarioTags: [
@@ -179,6 +184,17 @@ export default defineSegment({
         </Stack>
       ),
     },
+    {
+      name: 'With Separator',
+      description: 'Default line separator between items',
+      render: () => (
+        <Stack gap="md" separator>
+          <div>Section One</div>
+          <div>Section Two</div>
+          <div>Section Three</div>
+        </Stack>
+      ),
+    },
     {
       name: 'Semantic Element',
       description: 'Using nav element for navigation',

package/src/components/Stack/Stack.module.scss

@@ -118,3 +118,19 @@
 .wrap {
   flex-wrap: wrap;
 }
+
+// Separator
+.separator {
+  flex-shrink: 0;
+  background-color: var(--fui-border, $fui-border);
+
+  &[data-orientation="horizontal"] {
+    height: 1px;
+    width: 100%;
+  }
+
+  &[data-orientation="vertical"] {
+    width: 1px;
+    align-self: stretch;
+  }
+}

package/src/components/Stack/index.tsx

@@ -50,6 +50,12 @@ export interface StackProps {
   align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
   justify?: 'start' | 'center' | 'end' | 'between';
   wrap?: boolean;
+  /**
+   * Render a separator between each child.
+   * - `true` renders a default 1px border line
+   * - A ReactNode renders custom content between children
+   */
+  separator?: boolean | React.ReactNode;
   as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';
   className?: string;
   style?: React.CSSProperties;
@@ -74,6 +80,7 @@ export const Stack = React.forwardRef<HTMLElement, StackProps>(
       align,
       justify,
       wrap = false,
+      separator,
       as: Component = 'div',
       className,
       style,
@@ -126,9 +133,36 @@ export const Stack = React.forwardRef<HTMLElement, StackProps>(
 
     const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
 
+    // Interleave separator between children when provided
+    let content: React.ReactNode = children;
+    if (separator) {
+      const validChildren = React.Children.toArray(children).filter(Boolean);
+      if (validChildren.length > 1) {
+        const resolvedDir = isResponsiveDirection(direction) ? (direction.base ?? 'column') : direction;
+        const separatorEl = separator === true ? (
+          <div
+            className={styles.separator}
+            data-orientation={resolvedDir === 'row' ? 'vertical' : 'horizontal'}
+            role="separator"
+          />
+        ) : separator;
+
+        const items: React.ReactNode[] = [];
+        validChildren.forEach((child, i) => {
+          items.push(child);
+          if (i < validChildren.length - 1) {
+            items.push(
+              <React.Fragment key={`sep-${i}`}>{separatorEl}</React.Fragment>
+            );
+          }
+        });
+        content = items;
+      }
+    }
+
     return (
       <Component ref={ref as React.Ref<never>} className={classes} style={mergedStyle}>
-        {children}
+        {content}
       </Component>
     );
   }

package/src/components/Table/Table.fragment.tsx

@@ -111,6 +111,16 @@ export default defineSegment({
       values: ['sm', 'md'],
       default: 'md',
     },
+    striped: {
+      type: 'boolean',
+      description: 'Show alternating row backgrounds',
+      default: 'false',
+    },
+    bordered: {
+      type: 'boolean',
+      description: 'Wrap table in a bordered container',
+      default: 'false',
+    },
   },
 
   relations: [
@@ -125,6 +135,8 @@ export default defineSegment({
       'sortable: boolean - enable sorting',
       'selectable: boolean - enable row selection',
       'size: sm|md - table density',
+      'striped: boolean - alternating row backgrounds',
+      'bordered: boolean - bordered container',
     ],
     scenarioTags: [
       'data.table',
@@ -185,6 +197,28 @@ export default defineSegment({
         />
       ),
     },
+    {
+      name: 'Striped',
+      description: 'Table with alternating row backgrounds',
+      render: () => (
+        <Table
+          columns={columns}
+          data={sampleUsers}
+          striped
+        />
+      ),
+    },
+    {
+      name: 'Bordered',
+      description: 'Table with bordered container',
+      render: () => (
+        <Table
+          columns={columns}
+          data={sampleUsers}
+          bordered
+        />
+      ),
+    },
     {
       name: 'Empty State',
       description: 'Table with no data',

package/src/components/Table/Table.module.scss

@@ -33,7 +33,7 @@
 .sm {
   .th,
   .td {
-    padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
     font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   }
 }
@@ -41,7 +41,7 @@
 .md {
   .th,
   .td {
-    padding: var(--fui-space-3, $fui-space-3) var(--fui-space-4, $fui-space-4);
+    padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
     font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   }
 }
@@ -51,7 +51,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
 }
 
 .headerRow {
@@ -138,7 +138,6 @@
 }
 
 .selected {
-  background-color: var(--fui-color-accent, $fui-color-accent);
   background-color: rgba($fui-color-accent, 0.08);
 
   &:hover {
@@ -152,6 +151,37 @@
   line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
+// Striped rows
+.striped {
+  .row:nth-child(even) {
+    background-color: var(--fui-bg-subtle, $fui-bg-subtle);
+  }
+
+  // Hover and selected override stripe
+  .clickable:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  .clickable:active {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+
+  .selected {
+    background-color: rgba($fui-color-accent, 0.08);
+
+    &:hover {
+      background-color: rgba($fui-color-accent, 0.12);
+    }
+  }
+}
+
+// Bordered
+.bordered {
+  border: 1px solid var(--fui-border, $fui-border);
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  overflow: hidden;
+}
+
 // Empty state
 .emptyState {
   display: flex;
@@ -167,7 +197,7 @@
 }
 
 // Responsive: allow horizontal scroll on small screens
-@media (max-width: 640px) {
+@include below-sm {
   .wrapper {
     margin-left: calc(-1 * var(--fui-space-4, $fui-space-4));
     margin-right: calc(-1 * var(--fui-space-4, $fui-space-4));

package/src/components/Table/index.tsx

@@ -45,6 +45,10 @@ export interface TableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElemen
   caption?: string;
   /** Hide the caption visually but keep it for screen readers */
   captionHidden?: boolean;
+  /** Show alternating row backgrounds */
+  striped?: boolean;
+  /** Wrap table in a bordered container */
+  bordered?: boolean;
 }
 
 export function Table<T>({
@@ -63,6 +67,8 @@ export function Table<T>({
   className,
   caption,
   captionHidden = false,
+  striped = false,
+  bordered = false,
   'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedBy,
   ...htmlProps
@@ -95,7 +101,7 @@ export function Table<T>({
 
   const isEmpty = data.length === 0;
 
-  const rootClasses = [styles.table, styles[size], className]
+  const rootClasses = [styles.table, styles[size], striped && styles.striped, className]
     .filter(Boolean)
     .join(' ');
 
@@ -119,7 +125,7 @@ export function Table<T>({
   };
 
   return (
-    <div className={styles.wrapper}>
+    <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>
       <table
         {...htmlProps}
         className={rootClasses}

package/src/index.ts

@@ -406,15 +406,32 @@ export {
   type ListboxEmptyProps,
 } from './components/Listbox';
 
+// Breadcrumbs
+export {
+  Breadcrumbs,
+  BreadcrumbsRoot,
+  BreadcrumbsItem,
+  BreadcrumbsSeparator,
+  type BreadcrumbsProps,
+  type BreadcrumbsItemProps,
+  type BreadcrumbsSeparatorProps,
+} from './components/Breadcrumbs';
+
 // Box
 export { Box, type BoxProps } from './components/Box';
 
+// Chip
+export { Chip, type ChipProps, type ChipGroupProps } from './components/Chip';
+
 // VisuallyHidden
 export { VisuallyHidden, type VisuallyHiddenProps } from './components/VisuallyHidden';
 
 // Brand
 export { BRAND, type Brand } from './brand';
 
+// Markdown (AI Chat)
+export { Markdown, type MarkdownProps } from './components/Markdown';
+
 // Message (AI Chat)
 export {
   Message,