@flamingo-stack/openframe-frontend-core 0.0.225 → 0.0.227

package/src/components/features/notifications/approval-request-notification-tile.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { cn } from '../../../utils/cn'
+import { ApprovalBatchMessage } from '../../chat/approval-batch-message'
+import { ExpandChevron } from '../../chat/expand-chevron'
+import { useCollapsible } from '../../chat/hooks/use-collapsible'
+import type { ApprovalBatchData, ChatApprovalStatus } from '../../chat/types'
+import { NotificationTile } from './notification-tile'
+import { getApprovalMeta } from './types'
+import type { Notification } from './types'
+
+export interface ApprovalRequestNotificationTileProps {
+  notification: Notification
+  onApprove: (approvalRequestId: string) => void | Promise<void>
+  onReject: (approvalRequestId: string) => void | Promise<void>
+  onComplete: (id: string) => void
+  onSettle?: (id: string) => void
+  liveDurationMs?: number
+  defaultExpanded?: boolean
+  className?: string
+}
+
+export function ApprovalRequestNotificationTile({
+  notification,
+  onApprove,
+  onReject,
+  onComplete,
+  onSettle,
+  liveDurationMs,
+  defaultExpanded = false,
+  className,
+}: ApprovalRequestNotificationTileProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded)
+  // Toggling the command section pins the tile so a live pop-up doesn't
+  // auto-dismiss out from under the user mid-read.
+  const [pinned, setPinned] = useState(defaultExpanded)
+  const [status, setStatus] = useState<ChatApprovalStatus>('pending')
+
+  const approval = getApprovalMeta(notification)
+
+  const batchData = useMemo<ApprovalBatchData | null>(() => {
+    if (!approval) return null
+    return {
+      approvalRequestId: approval.approvalRequestId,
+      approvalType: approval.approvalType ?? '',
+      toolCalls: approval.toolCalls.map((tc, index) => ({
+        toolExecutionRequestId: tc.toolExecutionRequestId ?? `${approval.approvalRequestId}:${index}`,
+        toolName: tc.toolName,
+        toolTitle: tc.toolTitle ?? undefined,
+        toolExplanation: tc.toolExplanation ?? undefined,
+        toolType: tc.toolType ?? undefined,
+        requiresApproval: tc.requiresApproval ?? true,
+        approvalType: tc.approvalType ?? null,
+        toolCallArguments: tc.toolCallArguments ?? null,
+      })),
+    }
+  }, [approval])
+
+  const { innerRef, containerStyle } = useCollapsible({ expanded })
+
+  if (!approval || !batchData) return null
+
+  const commandWord = batchData.toolCalls.length > 1 ? 'Commands' : 'Command'
+  const toggleLabel = `${expanded ? 'Hide' : 'Show'} ${commandWord}`
+
+  const handleApprove = async () => {
+    await onApprove(batchData.approvalRequestId)
+    setStatus('approved')
+    onComplete(notification.id)
+  }
+  const handleReject = async () => {
+    await onReject(batchData.approvalRequestId)
+    setStatus('rejected')
+    onComplete(notification.id)
+  }
+
+  return (
+    <NotificationTile
+      notification={notification}
+      liveDurationMs={liveDurationMs}
+      onComplete={onComplete}
+      onSettle={onSettle}
+      className={className}
+      paused={pinned}
+    >
+      {/* Persistent collapse/expand control for the command section. */}
+      <button
+        type="button"
+        onClick={() => {
+          setExpanded(prev => !prev)
+          setPinned(true)
+        }}
+        aria-expanded={expanded}
+        className={cn(
+          'flex w-full items-center gap-[var(--spacing-system-xs)] bg-ods-card px-[var(--spacing-system-s)] py-[var(--spacing-system-xs)] text-left',
+          expanded && 'border-b border-ods-border',
+        )}
+      >
+        <span className="min-w-0 flex-1 text-h6 text-ods-text-primary">{toggleLabel}</span>
+        <ExpandChevron expanded={expanded} />
+      </button>
+
+      <div style={containerStyle}>
+        <div ref={innerRef}>
+          <ApprovalBatchMessage
+            data={batchData}
+            status={status}
+            onApprove={handleApprove}
+            onReject={handleReject}
+            maxBodyHeight="50vh"
+            className="mb-0 rounded-none border-0"
+          />
+        </div>
+      </div>
+    </NotificationTile>
+  )
+}

package/src/components/features/notifications/index.ts

@@ -10,9 +10,19 @@ export { NotificationTile } from './notification-tile'
 export type { NotificationTileProps } from './notification-tile'
 export { NotificationPopups } from './notification-popups'
 export type { NotificationPopupsProps, NotificationPopupsPosition } from './notification-popups'
+export { ApprovalRequestNotificationTile } from './approval-request-notification-tile'
+export type { ApprovalRequestNotificationTileProps } from './approval-request-notification-tile'
+export {
+  ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
+  getApprovalMeta,
+  isApprovalNotification,
+} from './types'
 export type {
   Notification,
   NotificationVariant,
   NotificationSeverity,
   AddNotificationInput,
+  ApprovalNotificationMeta,
+  ApprovalToolCallMeta,
+  RenderNotificationTile,
 } from './types'

package/src/components/features/notifications/notification-drawer.tsx

@@ -10,15 +10,22 @@ import { Switch } from '../../ui/switch'
 import { cn } from '../../../utils/cn'
 import { useOptionalNotifications } from './notifications-context'
 import { NotificationTile } from './notification-tile'
-import type { Notification } from './types'
+import type { Notification, RenderNotificationTile } from './types'
+
 
 export interface NotificationDrawerProps {
   className?: string
   liveDurationMs?: number
   loadMoreRootMargin?: string
+  renderTile?: RenderNotificationTile
 }
 
-export function NotificationDrawer({ className, liveDurationMs, loadMoreRootMargin = '200px' }: NotificationDrawerProps) {
+export function NotificationDrawer({
+  className,
+  liveDurationMs,
+  loadMoreRootMargin = '200px',
+  renderTile: renderTileProp,
+}: NotificationDrawerProps) {
   const ctx = useOptionalNotifications()
   if (!ctx) return null
 
@@ -37,8 +44,11 @@ export function NotificationDrawer({ className, liveDurationMs, loadMoreRootMarg
     hasMore,
     isLoadingMore,
     loadMore,
+    renderTile: ctxRenderTile,
   } = ctx
 
+  const renderTile = renderTileProp ?? ctxRenderTile
+
   const unreadNotifications = notifications.filter((n) => !n.read)
 
   return (
@@ -74,6 +84,7 @@ export function NotificationDrawer({ className, liveDurationMs, loadMoreRootMarg
           isLoadingMore={isLoadingMore}
           loadMore={loadMore}
           loadMoreRootMargin={loadMoreRootMargin}
+          renderTile={renderTile}
         />
 
         <div className="flex flex-col gap-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
@@ -96,6 +107,7 @@ interface DrawerScrollListProps {
   isLoadingMore: boolean
   loadMore?: () => void
   loadMoreRootMargin: string
+  renderTile?: RenderNotificationTile
 }
 
 function DrawerScrollList({
@@ -107,6 +119,7 @@ function DrawerScrollList({
   isLoadingMore,
   loadMore,
   loadMoreRootMargin,
+  renderTile,
 }: DrawerScrollListProps) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const sentinelRef = useRef<HTMLDivElement>(null)
@@ -138,15 +151,19 @@ function DrawerScrollList({
         <EmptyState />
       ) : (
         <>
-          {unreadNotifications.map((n) => (
-            <NotificationTile
-              key={n.id}
-              notification={n}
-              liveDurationMs={liveDurationMs}
-              onComplete={onComplete}
-              onSettle={onSettle}
-            />
-          ))}
+          {unreadNotifications.map((n) => {
+            const custom = renderTile?.(n, { onComplete, onSettle, liveDurationMs })
+            if (custom) return <div key={n.id}>{custom}</div>
+            return (
+              <NotificationTile
+                key={n.id}
+                notification={n}
+                liveDurationMs={liveDurationMs}
+                onComplete={onComplete}
+                onSettle={onSettle}
+              />
+            )
+          })}
           {isLoadingMore && <DrawerLoadingTiles />}
           {loadMore && hasMore && <div ref={sentinelRef} className="h-1" aria-hidden="true" />}
         </>

package/src/components/features/notifications/notification-popups.tsx

@@ -2,6 +2,7 @@
 
 import type { KeyboardEvent, MouseEvent } from 'react'
 import { cn } from '../../../utils/cn'
+import type { RenderNotificationTile } from './types'
 import { useOptionalNotifications } from './notifications-context'
 import { NotificationTile } from './notification-tile'
 import type { Notification } from './types'
@@ -18,6 +19,7 @@ export interface NotificationPopupsProps {
   maxVisible?: number
   position?: NotificationPopupsPosition
   hideWhenDrawerOpen?: boolean
+  renderTile?: RenderNotificationTile
 }
 
 const positionClasses: Record<NotificationPopupsPosition, string> = {
@@ -33,11 +35,13 @@ export function NotificationPopups({
   maxVisible = 4,
   position = 'top-right',
   hideWhenDrawerOpen = true,
+  renderTile: renderTileProp,
 }: NotificationPopupsProps) {
   const ctx = useOptionalNotifications()
   if (!ctx) return null
 
-  const { notifications, showPopups, isOpen, open, markRead, markSettled } = ctx
+  const { notifications, showPopups, isOpen, open, markRead, markSettled, renderTile: ctxRenderTile } = ctx
+  const renderTile = renderTileProp ?? ctxRenderTile
 
   if (!showPopups) return null
   if (hideWhenDrawerOpen && isOpen) return null
@@ -82,24 +86,34 @@ export function NotificationPopups({
         className,
       )}
     >
-      {live.map((n) => (
-        // biome-ignore lint/a11y/useSemanticElements: nested interactive elements forbid <button>
-        <div
-          key={n.id}
-          role="button"
-          tabIndex={0}
-          onClick={handleBodyClick(n)}
-          onKeyDown={handleBodyKeyDown(n)}
-          className="pointer-events-auto cursor-pointer rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
-        >
-          <NotificationTile
-            notification={n}
-            liveDurationMs={liveDurationMs}
-            onComplete={markRead}
-            onSettle={markSettled}
-          />
-        </div>
-      ))}
+      {live.map((n) => {
+        const custom = renderTile?.(n, { onComplete: markRead, onSettle: markSettled, liveDurationMs })
+        if (custom) {
+          return (
+            <div key={n.id} className="pointer-events-auto">
+              {custom}
+            </div>
+          )
+        }
+        return (
+          // biome-ignore lint/a11y/useSemanticElements: nested interactive elements forbid <button>
+          <div
+            key={n.id}
+            role="button"
+            tabIndex={0}
+            onClick={handleBodyClick(n)}
+            onKeyDown={handleBodyKeyDown(n)}
+            className="pointer-events-auto cursor-pointer rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
+          >
+            <NotificationTile
+              notification={n}
+              liveDurationMs={liveDurationMs}
+              onComplete={markRead}
+              onSettle={markSettled}
+            />
+          </div>
+        )
+      })}
     </div>
   )
 }

package/src/components/features/notifications/notification-tile.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo, useEffect} from 'react'
+import { useMemo, useEffect, type ReactNode } from 'react'
 import { CheckCircleIcon } from '../../icons-v2-generated/signs-and-symbols/check-circle-icon'
 import { XmarkIcon } from '../../icons-v2-generated/signs-and-symbols/xmark-icon'
 import { Button } from '../../ui/button/button'
@@ -14,6 +14,10 @@ export interface NotificationTileProps {
   onComplete: (id: string) => void
   onSettle?: (id: string) => void
   className?: string
+  /** Extra content rendered below the header inside the same card (e.g. an approval command section). */
+  children?: ReactNode
+  /** Pin the tile: cancel the live auto-dismiss countdown (timer + progress bar) without settling it. */
+  paused?: boolean
 }
 
 export function NotificationTile({
@@ -22,20 +26,23 @@ export function NotificationTile({
   onComplete,
   onSettle,
   className,
+  children,
+  paused = false,
 }: NotificationTileProps) {
   const { id, variant = 'default', title, description, createdAt, read, settled } = notification
 
   const initialElapsed = useMemo(() => Date.now() - createdAt, [createdAt])
   const isLive = !read && !settled && initialElapsed < liveDurationMs
+  const counting = isLive && !paused
 
   useEffect(() => {
-    if (!isLive) return
+    if (!counting) return
     const remaining = Math.max(0, liveDurationMs - initialElapsed)
     const timer = window.setTimeout(() => {
       onSettle?.(id)
     }, remaining)
     return () => window.clearTimeout(timer)
-  }, [id, isLive, initialElapsed, liveDurationMs, onSettle])
+  }, [id, counting, initialElapsed, liveDurationMs, onSettle])
 
   return (
     <output
@@ -44,7 +51,12 @@ export function NotificationTile({
         className,
       )}
     >
-      <div className="flex items-center gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]">
+      <div
+        className={cn(
+          'relative flex items-center gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]',
+          children ? 'border-b border-ods-border' : null,
+        )}
+      >
         <div className="flex size-6 shrink-0 items-center justify-center">
           <span className={cn('size-1.5 rounded-full', dotColorByVariant[variant])} />
         </div>
@@ -64,14 +76,31 @@ export function NotificationTile({
           aria-label="Mark notification complete"
           tabIndex={isLive ? -1 : 0}
           className={cn(
-            'shrink-0 text-ods-text-secondary hover:text-ods-text-primary',
+            'shrink-0 hover:text-ods-text-primary',
             isLive && 'invisible',
           )}
         >
           <CheckCircleIcon />
         </Button>
+
+        {/* Progress sits at the header's bottom edge (above any children). */}
+        {counting ? (
+          <div
+            aria-hidden
+            className={cn(
+              'absolute inset-x-0 -bottom-px h-1 origin-left',
+              progressColorByVariant[variant],
+            )}
+            style={{
+              animation: `toast-progress ${liveDurationMs}ms linear forwards`,
+              animationDelay: `-${initialElapsed}ms`,
+            }}
+          />
+        ) : null}
       </div>
 
+      {children}
+
       {/* Live-only bare X overlay */}
       <button
         type="button"
@@ -85,20 +114,6 @@ export function NotificationTile({
       >
         <XmarkIcon size={16} />
       </button>
-
-      {isLive ? (
-        <div
-          aria-hidden
-          className={cn(
-            'absolute inset-x-0 -bottom-px h-1 origin-left',
-            progressColorByVariant[variant],
-          )}
-          style={{
-            animation: `toast-progress ${liveDurationMs}ms linear forwards`,
-            animationDelay: `-${initialElapsed}ms`,
-          }}
-        />
-      ) : null}
     </output>
   )
 }

package/src/components/features/notifications/notifications-context.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import type { AddNotificationInput, Notification } from './types'
+import type { AddNotificationInput, Notification, RenderNotificationTile } from './types'
 
 interface NotificationsContextValue {
   notifications: Notification[]
@@ -24,6 +24,7 @@ interface NotificationsContextValue {
   hasMore: boolean
   isLoadingMore: boolean
   loadMore?: () => void
+  renderTile?: RenderNotificationTile
 }
 
 const NotificationsContext = React.createContext<NotificationsContextValue | null>(null)
@@ -51,6 +52,8 @@ export interface NotificationsProviderProps {
   hasMore?: boolean
   isLoadingMore?: boolean
   onLoadMore?: () => void
+  /** Override how individual tiles render (drawer + popups); falls back to `NotificationTile`. */
+  renderTile?: RenderNotificationTile
 }
 
 type Action =
@@ -140,6 +143,7 @@ export function NotificationsProvider({
   hasMore = false,
   isLoadingMore = false,
   onLoadMore,
+  renderTile,
 }: NotificationsProviderProps) {
   const [notifications, dispatch] = React.useReducer(reducer, initialNotifications)
   const [isOpen, setIsOpen] = React.useState(false)
@@ -244,6 +248,7 @@ export function NotificationsProvider({
       hasMore,
       isLoadingMore,
       loadMore: onLoadMore,
+      renderTile,
     }),
     [
       notifications,
@@ -266,6 +271,7 @@ export function NotificationsProvider({
       hasMore,
       isLoadingMore,
       onLoadMore,
+      renderTile,
     ],
   )
 

package/src/components/features/notifications/types.ts

@@ -24,3 +24,53 @@ export type AddNotificationInput =
     createdAt?: number
     read?: boolean
   }
+
+/** Per-notification tile renderer; return a node to override the default `NotificationTile`, or `undefined` to fall back. */
+export type RenderNotificationTile = (
+  notification: Notification,
+  helpers: { onComplete: (id: string) => void; onSettle: (id: string) => void; liveDurationMs?: number },
+) => ReactNode
+
+/** Discriminator carried in `notification.meta.contextType` for Mingo approval requests. */
+export const ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE = 'ADMIN_APPROVAL_REQUEST'
+
+/** A single planned tool invocation awaiting approval. */
+export interface ApprovalToolCallMeta {
+  toolExecutionRequestId?: string | null
+  toolName: string
+  toolTitle?: string | null
+  toolExplanation?: string | null
+  toolType?: string | null
+  requiresApproval?: boolean
+  approvalType?: string | null
+  toolCallArguments?: Record<string, unknown> | null
+}
+
+/** Approval payload stashed in `notification.meta` for an `ADMIN_APPROVAL_REQUEST` notification. */
+export interface ApprovalNotificationMeta {
+  approvalRequestId: string
+  dialogId?: string | null
+  ticketId?: string | null
+  approvalType?: string | null
+  toolCalls: ApprovalToolCallMeta[]
+}
+
+export function isApprovalNotification(notification: Notification): boolean {
+  return notification.meta?.contextType === ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE
+}
+
+/** Safely read the approval payload off a notification; returns null when absent or malformed. */
+export function getApprovalMeta(notification: Notification): ApprovalNotificationMeta | null {
+  if (!isApprovalNotification(notification)) return null
+  const meta = notification.meta
+  const approvalRequestId = meta?.approvalRequestId
+  const toolCalls = meta?.toolCalls
+  if (typeof approvalRequestId !== 'string' || !Array.isArray(toolCalls)) return null
+  return {
+    approvalRequestId,
+    dialogId: (meta?.dialogId as string | undefined) ?? null,
+    ticketId: (meta?.ticketId as string | undefined) ?? null,
+    approvalType: (meta?.approvalType as string | undefined) ?? null,
+    toolCalls: toolCalls as ApprovalToolCallMeta[],
+  }
+}

package/src/components/ui/color-preset-select.tsx

@@ -7,6 +7,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover'
 import { cn } from '../../utils/cn'
 import { HEX_PATTERN, hexToRgb, hslToRgb, rgbToHex, rgbToHsl } from '../../utils/ods-color-utils'
 import { ActionsMenuDropdown, type ActionsMenuGroup } from './actions-menu'
+import { ColorSwatch } from './color-swatch'
 import { Input } from './input'
 import { InputTrigger } from './input-trigger'
 
@@ -35,16 +36,6 @@ export const TICKET_STATUS_COLOR_PRESETS: readonly ColorPreset[] = [
 export const CUSTOM_PRESET_KEY = 'custom'
 export const DEFAULT_CUSTOM_STATUS_COLOR = '#888888'
 
-function ColorSwatch({ color, className }: { color: string; className?: string }) {
-  return (
-    <span
-      aria-hidden
-      className={cn('inline-block size-4 shrink-0 rounded-sm', className)}
-      style={{ backgroundColor: color }}
-    />
-  )
-}
-
 function TriggerChevron() {
   return (
     <Chevron02DownIcon

package/src/components/ui/color-swatch.tsx

@@ -0,0 +1,17 @@
+import { cn } from '../../utils/cn'
+
+export interface ColorSwatchProps {
+  color: string
+  className?: string
+}
+
+/** Square color preview shared across color and status selectors. */
+export function ColorSwatch({ color, className }: ColorSwatchProps) {
+  return (
+    <span
+      aria-hidden
+      className={cn('inline-block size-4 shrink-0 rounded-sm', className)}
+      style={{ backgroundColor: color }}
+    />
+  )
+}

package/src/components/ui/data-table/data-table-body.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import { cn } from '../../../utils/cn'
 import { useDataTableContext } from './data-table'
 import { DataTableEmpty } from './data-table-empty'
@@ -39,6 +40,12 @@ export interface DataTableBodyProps<T = any> {
    * Typically set to the same value as `skeletonRows`. Pass `0` to disable.
    */
   minRows?: number
+  /**
+   * Render expandable content below a row, inside the same card. Return a node to
+   * attach it (the cells row gains a bottom divider), or null/undefined for none.
+   * Interactive content inside must carry `data-no-row-click`.
+   */
+  renderSubRow?: (item: T) => ReactNode
 }
 
 /**
@@ -57,6 +64,7 @@ export function DataTableBody<T = any>({
   onRowClick,
   rowHref,
   minRows,
+  renderSubRow,
 }: DataTableBodyProps<T>) {
   const table = useDataTableContext<T>()
   const rows = table.getRowModel().rows
@@ -94,6 +102,7 @@ export function DataTableBody<T = any>({
             href={href}
             compact={compact}
             className={cls}
+            subRow={renderSubRow?.(item)}
           />
         )
       })}

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

@@ -14,6 +14,8 @@ export interface DataTableRowProps<T> {
   /** Dense row height. */
   compact?: boolean
   className?: string
+  /** Expandable content rendered below the cells, inside the same card. */
+  subRow?: ReactNode
 }
 
 /**
@@ -59,8 +61,13 @@ function DataTableRowImpl<T>({
   href,
   compact,
   className,
+  subRow,
 }: DataTableRowProps<T>) {
+  const hasSubRow = subRow != null && subRow !== false
+  // A sub-row carries its own interactive controls, so it must not live inside the
+  // row-level <Link>; when present, the link wraps only the cells.
   const isLinkMode = Boolean(href) && !onClick
+  const isWholeCardLink = isLinkMode && !hasSubRow
   const containerRef = useRef<HTMLElement | null>(null)
 
   const handleClick = useCallback(
@@ -84,7 +91,8 @@ function DataTableRowImpl<T>({
 
   const containerClassName = cn(
     'block rounded-md bg-ods-card border border-ods-border overflow-hidden no-underline text-inherit',
-    (onClick || isLinkMode) && 'cursor-pointer hover:bg-ods-bg-active transition-colors',
+    // With a sub-row the link wraps only the cells, so keep the clickable affordance off the whole card.
+    (onClick || isWholeCardLink) && 'cursor-pointer hover:bg-ods-bg-active transition-colors',
     className,
   )
 
@@ -93,6 +101,7 @@ function DataTableRowImpl<T>({
       className={cn(
         'flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]',
         compact ? 'py-[var(--spacing-system-xsf)]' : `py-0 ${ROW_HEIGHT_DESKTOP}`,
+        hasSubRow && 'border-b border-ods-border',
       )}
     >
       {row.getVisibleCells().map(cell => {
@@ -117,7 +126,7 @@ function DataTableRowImpl<T>({
     </div>
   )
 
-  if (isLinkMode && href) {
+  if (isWholeCardLink && href) {
     return (
       <Link
         href={href}
@@ -137,7 +146,19 @@ function DataTableRowImpl<T>({
       className={containerClassName}
       onClick={onClick ? handleClick : undefined}
     >
-      {cells}
+      {isLinkMode && href ? (
+        <Link
+          href={href}
+          prefetch={false}
+          className="block no-underline text-inherit cursor-pointer hover:bg-ods-bg-active transition-colors"
+          onClick={handleClick}
+        >
+          {cells}
+        </Link>
+      ) : (
+        cells
+      )}
+      {hasSubRow && subRow}
     </div>
   )
 }

package/src/components/ui/index.ts

@@ -149,6 +149,7 @@ export * from './image-uploader'
 // Ticket components
 export * from './ticket-status-tag'
 export * from './ticket-status-config-row'
+export * from './color-swatch'
 export * from './color-preset-select'
 export * from './assignee-dropdown'
 export * from './ticket-info-section'