@flamingo-stack/openframe-frontend-core 0.0.340 → 0.0.341-snapshot.20260630022404

package/src/components/chat/guide-welcome.tsx

@@ -32,12 +32,12 @@ export interface GuideWelcomeProps {
    *  `subtitle` is present. */
   subtitleLoading?: boolean
   /** Quick-action chips — caller-provided; there are no built-in defaults, so
-   *  the chip row is omitted entirely unless the host supplies actions. The row
-   *  is a single line: as many chips as fit render inline and the rest collapse
-   *  under a trailing "⋯" overflow menu (width-measured by `ChatQuickActionRow`,
-   *  so the inline count adapts to the available width — no fixed cap). */
+   *  the chip row is omitted entirely unless the host supplies actions. ALL
+   *  chips render in a wrapping row (no "⋯" overflow collapse) so every action
+   *  is directly hoverable — hover/focus previews the action's full `prompt` in
+   *  the composer; click sends it. */
   quickActions?: ReadonlyArray<GuideQuickAction>
-  /** Fired when a quick-action chip (inline or menu) is activated. */
+  /** Fired when a quick-action chip is activated (click). */
   onQuickAction?: (action: GuideQuickAction) => void
   /** Pointer/keyboard focus enters a quick-action chip — e.g. preview the
    *  action's full `prompt` in the composer input. */
@@ -105,8 +105,9 @@ export function GuideWelcome({
     return () => ro.disconnect()
   }, [updateScrollFade])
 
-  // Map to the shared width-measured chip row's shape. As many chips as fit on
-  // ONE line render inline; the rest collapse under the trailing "⋯" menu.
+  // Map to the shared `ChatQuickActionRow` chip shape. In `wrap` mode every chip
+  // renders (no overflow), and `onHoverStart`/`onHoverEnd` drive the composer
+  // prompt preview.
   const chipItems = React.useMemo(
     () =>
       quickActions.map((action) => ({
@@ -197,10 +198,19 @@ export function GuideWelcome({
         />
       </div>
 
-      {/* Pinned quick-action chips — always visible above the composer.
-          Single line: as many chips as fit render inline, the rest collapse
-          into the trailing "⋯" menu (width-measured by `ChatQuickActionRow`). */}
-      {quickActions.length > 0 && <ChatQuickActionRow chips={chipItems} />}
+      {/* Pinned quick-action chips above the composer — the shared
+          `ChatQuickActionRow` in `wrap` mode: ALL chips render (no "⋯" overflow
+          collapse) so every action is directly hoverable; hover/focus previews
+          the action's full prompt in the composer, click sends it. Capped height
+          + internal scroll so a long (host/admin-driven) list can't grow the
+          pinned area without bound and squeeze the composer on short screens. */}
+      {quickActions.length > 0 && (
+        <ChatQuickActionRow
+          wrap
+          chips={chipItems}
+          className="max-h-28 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30"
+        />
+      )}
     </div>
   )
 }

package/src/components/chat/types/component.types.ts

@@ -399,6 +399,12 @@ export interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
   /** Suppress the textarea's own border/bg/radius — an outer card draws it
    *  instead (composer context-chip layout). Forwarded to `Textarea.hideBorder`. */
   hideBorder?: boolean
+  /** Ephemeral, non-destructive preview text shown over the editor — e.g.
+   *  previewing a hovered quick-action's full prompt before the user commits it.
+   *  Purely declarative: it NEVER touches the editor's real value. While set, it
+   *  visually replaces the editor (even an in-progress draft); clearing it
+   *  (undefined) restores whatever the user had — empty or typed — verbatim. */
+  previewText?: string
 }
 
 export interface ChatInputRef {

package/src/components/ui/table/table-row.tsx

@@ -20,9 +20,21 @@ export function TableRow<T = any>({
   compact,
   selectable,
   selected,
-  onSelect
+  onSelect,
+  animateRowReorder,
+  motionDiv
 }: TableRowProps<T>) {
   const isLinkMode = Boolean(href) && !onClick
+  // Opt-in FLIP: the outer row becomes a `motion.div` (passed down lazily from
+  // Table, so framer-motion stays out of the default bundle) that animates only
+  // its position (`layout="position"`) so reordering doesn't distort inner cell
+  // content (CircularProgress / ProgressBar). Plain `<div>` when off, or until
+  // framer-motion has loaded — zero cost on the default path.
+  const animate = Boolean(animateRowReorder && motionDiv)
+  const Row: any = animate ? motionDiv : 'div'
+  const motionProps = animate
+    ? { layout: 'position' as const, transition: { layout: { duration: 0.35, ease: [0.22, 1, 0.36, 1] as const } } }
+    : {}
 
   const handleRowClick = (e: React.MouseEvent) => {
     const target = e.target as HTMLElement
@@ -67,7 +79,8 @@ export function TableRow<T = any>({
   }
 
   return (
-    <div
+    <Row
+      {...motionProps}
       className={cn(
         'relative rounded-[6px] bg-ods-card border border-ods-border overflow-hidden',
         (onClick || isLinkMode) && 'cursor-pointer hover:bg-ods-bg-active transition-colors',
@@ -112,6 +125,6 @@ export function TableRow<T = any>({
           </TableCell>
         ))}
       </div>
-    </div>
+    </Row>
   )
 }

package/src/components/ui/table/table.tsx

@@ -10,6 +10,7 @@ import { TableEmptyState } from './table-empty-state'
 import { TableHeader } from './table-header'
 import { TableRow } from './table-row'
 import { ROW_HEIGHT_DESKTOP, ROW_HEIGHT_MOBILE, TableCardSkeleton } from './table-skeleton'
+import { useTableMotion } from './use-table-motion'
 import type { RowAction, TableColumn, TableProps } from './types'
 
 /**
@@ -118,7 +119,11 @@ export function Table<T = any>({
   infiniteScroll,
   stickyHeader,
   stickyHeaderOffset,
+  animateRowReorder,
 }: TableProps<T>) {
+  // Opt-in row-reorder animation: framer-motion is loaded lazily (its own chunk)
+  // ONLY when `animateRowReorder` is set, so the default table stays motion-free.
+  const tableMotion = useTableMotion(Boolean(animateRowReorder))
   const columnsWithActions = injectSyntheticColumns(columns, rowActions, renderRowActions, rowHref)
   const getRowHref = (item: T): string | undefined => {
     if (onRowClick || !rowHref) return undefined
@@ -252,21 +257,35 @@ export function Table<T = any>({
           <TableEmptyState message={emptyMessage} />
         ) : (
           <>
-            {data.map((item, index) => (
-              <TableRow
-                key={getRowKey(item, index)}
-                item={item}
-                columns={columnsWithActions}
-                onClick={onRowClick}
-                href={getRowHref(item)}
-                className={getRowClassName(item, index)}
-                index={index}
-                compact={compact}
-                selectable={selectable}
-                selected={isRowSelected(item)}
-                onSelect={handleSelectRow}
-              />
-            ))}
+            {/* Real data rows. When `animateRowReorder` is on, wrap ONLY these
+                in a `LayoutGroup` so a reorder (same key, new order) animates via
+                FLIP — the invisible placeholder rows below are intentionally left
+                outside it. `AnimatePresence` is not needed here: the row set is
+                stable across a reorder (no enter/exit); add it if a future task
+                animates rows being added/removed. */}
+            {(() => {
+              const rows = data.map((item, index) => (
+                <TableRow
+                  key={getRowKey(item, index)}
+                  item={item}
+                  columns={columnsWithActions}
+                  onClick={onRowClick}
+                  href={getRowHref(item)}
+                  className={getRowClassName(item, index)}
+                  index={index}
+                  compact={compact}
+                  selectable={selectable}
+                  selected={isRowSelected(item)}
+                  onSelect={handleSelectRow}
+                  animateRowReorder={animateRowReorder}
+                  motionDiv={tableMotion?.motionDiv}
+                />
+              ))
+              // LayoutGroup only once framer-motion has lazily resolved; until
+              // then (and when off) rows render as plain `<div>`s.
+              const LayoutGroup = tableMotion?.LayoutGroup
+              return animateRowReorder && LayoutGroup ? <LayoutGroup>{rows}</LayoutGroup> : rows
+            })()}
             {/* Infinite scroll: skeleton rows */}
             {infiniteScroll?.isFetchingNextPage && (
               <TableCardSkeleton

package/src/components/ui/table/types.ts

@@ -151,6 +151,15 @@ export interface TableProps<T = any> {
   stickyHeader?: boolean
   /** Tailwind top class for sticky header offset, e.g. "top-[72px]" */
   stickyHeaderOffset?: string
+
+  /**
+   * Opt-in: render body rows as `motion.div` with `layout="position"` so a data
+   * reorder (same `rowKey`, new order) animates via FLIP. Off by default — all
+   * existing usages are unaffected. Honor `prefers-reduced-motion` at the call
+   * site (pass `false` when reduced motion is requested) so the lib prop stays
+   * purely mechanical and adds zero motion runtime when off.
+   */
+  animateRowReorder?: boolean
 }
 
 /** @deprecated Use types from `data-table` instead. */
@@ -209,6 +218,14 @@ export interface TableRowProps<T = any> {
   selectable?: boolean
   selected?: boolean
   onSelect?: (item: T) => void
+  /** Opt-in FLIP reorder — see `TableProps.animateRowReorder`. Forwarded by `Table`. */
+  animateRowReorder?: boolean
+  /**
+   * Internal: the lazily-resolved framer-motion `motion.div`, injected by `Table`
+   * so framer-motion stays out of the default bundle. `any` so this module never
+   * statically references framer-motion. Plain `<div>` is used until it's set.
+   */
+  motionDiv?: any
 }
 
 /** @deprecated Use types from `data-table` instead. */

package/src/components/ui/table/use-table-motion.ts

@@ -0,0 +1,48 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+/**
+ * Framer Motion runtime resolved lazily for the opt-in row-reorder animation.
+ * `motionDiv` is `motion.div`; `LayoutGroup` coordinates the FLIP.
+ */
+export interface TableMotionRuntime {
+  // framer-motion component types are intentionally `any` here so the base table
+  // never has to statically reference framer-motion (keeping it out of the
+  // default bundle).
+  motionDiv: any
+  LayoutGroup: any
+}
+
+/**
+ * Lazily loads `framer-motion` — via a dynamic `import()` so it lands in its own
+ * chunk — ONLY when row-reorder animation is enabled. Consumers that never set
+ * `animateRowReorder` never pull framer-motion into their bundle (the default
+ * `Table`/`TableRow` path stays motion-free).
+ *
+ * Returns `null` until the module resolves (and always when `enabled` is false);
+ * callers render plain DOM in the meantime, so the first paint is non-animated
+ * and the FLIP kicks in once the chunk has loaded.
+ */
+export function useTableMotion(enabled: boolean): TableMotionRuntime | null {
+  const [runtime, setRuntime] = useState<TableMotionRuntime | null>(null)
+
+  useEffect(() => {
+    if (!enabled || runtime) return
+    let active = true
+    import('framer-motion')
+      .then((m) => {
+        if (active) setRuntime({ motionDiv: m.motion.div, LayoutGroup: m.LayoutGroup })
+      })
+      .catch(() => {
+        // Chunk-load failure → keep `runtime` null so the table degrades to
+        // plain (non-animated) rows, instead of surfacing an unhandled
+        // promise rejection / global chunk-load error.
+      })
+    return () => {
+      active = false
+    }
+  }, [enabled, runtime])
+
+  return enabled ? runtime : null
+}