@flamingo-stack/openframe-frontend-core 0.0.202 → 0.0.203

package/src/components/ui/filter-list.tsx

@@ -56,7 +56,7 @@ export function FilterListItem({
       )}
     >
       <div className="flex min-w-0 flex-1 flex-col">
-        <p className="truncate text-h4 text-ods-text-primary">
+        <p className="truncate text-h4 text-ods-text-primary" title={title}>
           {title}
         </p>
 

package/src/components/ui/floating-tooltip.tsx

@@ -23,6 +23,8 @@ interface FloatingTooltipProps {
   side?: "top" | "right" | "bottom" | "left"
   className?: string
   delayDuration?: number
+  /** Disable the tooltip without unmounting the trigger wrapper. */
+  disabled?: boolean
 }
 
 // Parse colored text markup like [YELLOW]text[/YELLOW] into JSX
@@ -75,12 +77,13 @@ function parseColoredText(text: string): React.ReactNode {
   return parts.length > 0 ? <>{parts}</> : text
 }
 
-export function FloatingTooltip({ 
-  content, 
-  children, 
-  side = "right", 
+export function FloatingTooltip({
+  content,
+  children,
+  side = "right",
   className,
-  delayDuration = 0 
+  delayDuration = 0,
+  disabled = false,
 }: FloatingTooltipProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const arrowRef = React.useRef<HTMLDivElement>(null)
@@ -104,6 +107,7 @@ export function FloatingTooltip({
 
   const hover = useHover(context, {
     move: false,
+    enabled: !disabled,
     delay: { open: delayDuration, close: 0 },
     handleClose: safePolygon(),
   })

package/src/components/ui/hidden-tags-popup.tsx

@@ -40,7 +40,7 @@ export const HiddenTagsPopup = forwardRef(function HiddenTagsPopup(
             "border-b border-ods-border last:border-b-0",
           )}
         >
-          <span className="text-h5 truncate uppercase text-ods-text-primary">
+          <span className="text-h5 truncate uppercase text-ods-text-primary" title={typeof item.label === 'string' ? item.label : undefined}>
             {item.label}
           </span>
           {!disabled && onRemove && (

package/src/components/ui/index.ts

@@ -76,6 +76,7 @@ export * from './entity-image'
 export * from './feature-card'
 export * from './feature-list'
 export { FloatingTooltip } from './floating-tooltip'
+export { TruncateText, type TruncateTextProps } from './truncate-text'
 export * from './highlight-card'
 export * from './icons-block'
 export * from './filter-modal'

package/src/components/ui/info-card.tsx

@@ -39,7 +39,7 @@ export function InfoCard({ data, className = '' }: InfoCardProps) {
     >
       {data.title && (
         <div className="flex items-center gap-[var(--spacing-system-xsf)] self-stretch h-6">
-          <span className="text-h4 text-ods-text-primary truncate">
+          <span className="text-h4 text-ods-text-primary truncate" title={data.title}>
             {data.title}
           </span>
           {data.icon}
@@ -48,7 +48,7 @@ export function InfoCard({ data, className = '' }: InfoCardProps) {
 
       {/* Subtitle */}
       {data.subtitle && (
-        <div className="text-h4 text-ods-text-secondary truncate self-stretch">
+        <div className="text-h4 text-ods-text-secondary truncate self-stretch" title={data.subtitle}>
           {data.subtitle}
         </div>
       )}

package/src/components/ui/input-trigger.tsx

@@ -66,8 +66,7 @@ export const InputTrigger = React.forwardRef<HTMLButtonElement, InputTriggerProp
 					className={cn(
 						"flex-1 min-w-0 text-left truncate",
 						isPlaceholder && "text-ods-text-secondary",
-					)}
-				>
+					)} title={isPlaceholder ? placeholder : (typeof selectedLabel === 'string' ? selectedLabel : undefined)}>
 					{isPlaceholder ? placeholder : selectedLabel}
 				</span>
 				{endIcon && (

package/src/components/ui/organization-card.tsx

@@ -104,10 +104,10 @@ export function OrganizationCard({
         />
 
         <div className="flex-1 flex flex-col justify-center py-2 min-w-0">
-          <h3 className="font-['DM_Sans'] font-bold text-lg leading-[1.33] tracking-[-0.02em] text-ods-text-primary transition-colors truncate">
+          <h3 className="font-['DM_Sans'] font-bold text-lg leading-[1.33] tracking-[-0.02em] text-ods-text-primary transition-colors truncate" title={organization.name}>
             {organization.name}
           </h3>
-          <p className="font-['DM_Sans'] font-medium text-sm leading-[1.43] text-ods-text-secondary truncate">
+          <p className="font-['DM_Sans'] font-medium text-sm leading-[1.43] text-ods-text-secondary truncate" title={organization.industry || organization.tier || organization.websiteUrl || "Organization"}>
             {organization.industry || organization.tier || organization.websiteUrl || "Organization"}
           </p>
         </div>
@@ -116,7 +116,7 @@ export function OrganizationCard({
       {/* Description */}
       {organization.description && (
         <div className="w-full h-12 overflow-hidden">
-          <p className="font-['DM_Sans'] font-medium text-lg leading-[1.33] text-ods-text-primary line-clamp-2">
+          <p className="font-['DM_Sans'] font-medium text-lg leading-[1.33] text-ods-text-primary line-clamp-2" title={organization.description}>
             {organization.description}
           </p>
         </div>

package/src/components/ui/radio-group.tsx

@@ -145,8 +145,7 @@ const RadioGroupBlock = React.forwardRef<
                     className={cn(
                       "font-[family-name:var(--font-h4-family)] font-[number:var(--font-h4-weight)] text-[length:var(--font-size-h4-body)] leading-[24px]",
                       "text-ods-text-primary select-none truncate"
-                    )}
-                  >
+                    )} title={typeof option.label === 'string' ? option.label : undefined}>
                     {option.label}
                   </span>
                   {option.description && (
@@ -168,7 +167,7 @@ const RadioGroupBlock = React.forwardRef<
           })}
         </RadioGroupPrimitive.Root>
         {error && (
-          <p className="absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate text-ods-error">
+          <p className="absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate text-ods-error" title={error}>
             {error}
           </p>
         )}

package/src/components/ui/search-input.tsx

@@ -325,11 +325,11 @@ export function SearchInput({
         <div className={cn(
           "text-sm font-medium leading-5 truncate",
           isHighlighted ? "text-ods-accent" : "text-ods-text-primary"
-        )}>
+        )} title={result.title}>
           {result.title}
         </div>
         {result.description && (
-          <div className="text-xs leading-4 text-ods-text-secondary truncate mt-0.5">
+          <div className="text-xs leading-4 text-ods-text-secondary truncate mt-0.5" title={result.description}>
             {result.description}
           </div>
         )}

package/src/components/ui/service-card.tsx

@@ -61,9 +61,9 @@ export function ServiceCard({ title, subtitle, icon, tag, rows, className }: Ser
             {resolvedIcon}
           </div>
           <div className="min-w-0">
-            <div className="text-xl font-semibold text-ods-text-primary truncate">{title}</div>
+            <div className="text-xl font-semibold text-ods-text-primary truncate" title={title}>{title}</div>
             {subtitle && (
-              <div className="text-sm text-ods-text-secondary truncate">{subtitle}</div>
+              <div className="text-sm text-ods-text-secondary truncate" title={subtitle}>{subtitle}</div>
             )}
           </div>
         </div>
@@ -104,7 +104,7 @@ function ServiceCardRowItem({ row }: { row: ServiceCardRow }) {
         <div className="w-20 md:w-24 shrink-0 text-sm font-medium text-ods-text-primary">{row.label}</div>
       )}
       <div className={cn('flex-1 h-12 rounded-md border border-ods-border bg-ods-bg px-3 md:px-4 flex items-center justify-between min-w-0', row.monospace ? 'font-mono' : '')}>
-        <div className="truncate text-ods-text-primary min-w-0">{displayValue}</div>
+        <div className="truncate text-ods-text-primary min-w-0" title={typeof row.value === 'string' ? row.value : undefined}>{displayValue}</div>
         <div className="flex items-center gap-2 pl-3 flex-shrink-0">
           {actions.reveal && (
             <button

package/src/components/ui/tag.tsx

@@ -92,7 +92,7 @@ function Tag({
           {icon}
         </span>
       )}
-      <span className={cn("truncate", labelClassName)}>{label}</span>
+      <span className={cn("truncate", labelClassName)} title={typeof label === 'string' ? label : undefined}>{label}</span>
       {onClose && (
         <button
           type="button"

package/src/components/ui/tags-manager.tsx

@@ -329,7 +329,7 @@ export function TagsManager({
 												}}
 											>
 												<div className="flex items-center justify-between w-full">
-													<span className="truncate">{tag.name}</span>
+													<span className="truncate" title={tag.name}>{tag.name}</span>
 													<div className="flex items-center gap-1 shrink-0">
 														{isSelected && (
 															<CheckIcon
@@ -401,7 +401,7 @@ export function TagsManager({
 												size={16}
 												className="text-ods-accent shrink-0"
 											/>
-											<span className="text-ods-accent truncate">
+											<span className="text-ods-accent truncate" title={`Create "${search.trim()}"`}>
 												Create &ldquo;{search.trim()}&rdquo;
 											</span>
 										</div>

package/src/components/ui/ticket-attachments-list.tsx

@@ -44,7 +44,7 @@ export function TicketAttachmentsList({ attachments, className }: TicketAttachme
             </div>
           )}
           <div className="flex-1 min-w-0 overflow-hidden">
-            <p className="text-h4 text-ods-text-primary truncate">{attachment.fileName}</p>
+            <p className="text-h4 text-ods-text-primary truncate" title={attachment.fileName}>{attachment.fileName}</p>
             <p className="text-h6 text-ods-text-secondary">{attachment.fileSize}</p>
           </div>
           {attachment.onDownload && (

package/src/components/ui/ticket-info-section.tsx

@@ -89,12 +89,11 @@ function InfoCell({ value, label, icon, onClick }: {
             <button
               type="button"
               onClick={onClick}
-              className="text-h4 text-ods-text-primary truncate hover:text-ods-accent transition-colors cursor-pointer text-left"
-            >
+              className="text-h4 text-ods-text-primary truncate hover:text-ods-accent transition-colors cursor-pointer text-left" title={value}>
               {value}
             </button>
           ) : (
-            <span className="text-h4 text-ods-text-primary truncate">{value}</span>
+            <span className="text-h4 text-ods-text-primary truncate" title={value}>{value}</span>
           )}
         </div>
         <span className="text-h6 text-ods-text-secondary truncate">{label}</span>

package/src/components/ui/ticket-note-card.tsx

@@ -96,7 +96,10 @@ export function TicketNoteCard({ note, onEdit, onDelete, className }: TicketNote
         ) : (
           <>
             <p className="text-h4 text-ods-text-primary">{note.text}</p>
-            <p className="text-h6 text-ods-text-secondary truncate">
+            <p
+              className="text-h6 text-ods-text-secondary truncate"
+              title={`${note.authorName} • ${note.createdAt}`}
+            >
               {note.authorName} &bull; {note.createdAt}
             </p>
           </>

package/src/components/ui/toaster.tsx

@@ -61,10 +61,10 @@ function ToastHeader({
 
       <div className="flex min-w-0 flex-1 flex-col justify-center font-['DM_Sans'] font-medium">
         {title ? (
-          <p className="truncate pr-5 text-[18px] leading-6 text-ods-text-primary">{title}</p>
+          <p className="truncate pr-5 text-[18px] leading-6 text-ods-text-primary" title={typeof title === 'string' ? title : undefined}>{title}</p>
         ) : null}
         {description ? (
-          <p className="text-[14px] leading-5 text-ods-text-secondary line-clamp-3">{description}</p>
+          <p className="text-[14px] leading-5 text-ods-text-secondary line-clamp-3" title={typeof description === 'string' ? description : undefined}>{description}</p>
         ) : null}
       </div>
 
@@ -206,7 +206,7 @@ export function CommandApprovalToast({
       >
         <div className="overflow-hidden">
           <div className="flex h-11 w-full items-center gap-2 border-b border-ods-border bg-ods-card px-3 py-2">
-            <p className="min-w-0 flex-1 truncate font-['DM_Sans'] text-[14px] font-medium leading-5 text-ods-text-primary">
+            <p className="min-w-0 flex-1 truncate font-['DM_Sans'] text-[14px] font-medium leading-5 text-ods-text-primary" title={command}>
               {command}
             </p>
             {toolType ? <ToolIcon toolType={toolType} size={16} /> : null}

package/src/components/ui/truncate-text.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import React, { type ReactNode, useEffect, useRef, useState } from 'react'
+import { cn } from '../../utils/cn'
+import { FloatingTooltip } from './floating-tooltip'
+
+/** ODS typography variants. Maps to the `.text-h1`…`.text-h6` utilities. */
+export type TruncateTextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+/** ODS text tone. Maps to the `text-ods-text-*` colour utilities. */
+export type TruncateTextTone = 'primary' | 'secondary'
+
+export interface TruncateTextProps {
+  children: string
+  /** Tooltip content; defaults to `children`. */
+  tooltip?: ReactNode
+  /** Extra classes merged after the variant/tone defaults. */
+  className?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  /** Max visible lines. `1` uses `truncate` (single-line ellipsis); higher values use `line-clamp-N`. */
+  lines?: 1 | 2 | 3 | 4 | 5 | 6
+  /** ODS typography token. Default: `'h4'` (body). */
+  variant?: TruncateTextVariant
+  /** ODS text tone. Default: `'primary'`. */
+  tone?: TruncateTextTone
+  /** Force the monospace (heading) font family — preserves the variant's size while swapping family. */
+  mono?: boolean
+}
+
+const VARIANT_CLASS: Record<TruncateTextVariant, string> = {
+  h1: 'text-h1',
+  h2: 'text-h2',
+  h3: 'text-h3',
+  h4: 'text-h4',
+  h5: 'text-h5',
+  h6: 'text-h6',
+}
+
+const TONE_CLASS: Record<TruncateTextTone, string> = {
+  primary: 'text-ods-text-primary',
+  secondary: 'text-ods-text-secondary',
+}
+
+const LINE_CLAMP_CLASS: Record<2 | 3 | 4 | 5 | 6, string> = {
+  2: 'line-clamp-2',
+  3: 'line-clamp-3',
+  4: 'line-clamp-4',
+  5: 'line-clamp-5',
+  6: 'line-clamp-6',
+}
+
+/**
+ * Truncated text bound to the ODS typography system. Shows a `FloatingTooltip`
+ * with the full value when (and only when) the content overflows.
+ *
+ * ```tsx
+ * <TruncateText>{name}</TruncateText>                                // h4 / primary
+ * <TruncateText variant="h6" tone="secondary">{email}</TruncateText> // caption
+ * <TruncateText lines={3}>{description}</TruncateText>               // 3-line clamp
+ * ```
+ */
+export function TruncateText({
+  children,
+  tooltip,
+  className,
+  side = 'top',
+  lines = 1,
+  variant = 'h4',
+  tone = 'primary',
+  mono = false,
+}: TruncateTextProps) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [isTruncated, setIsTruncated] = useState(false)
+  const isMultiLine = lines > 1
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const check = () => {
+      const overflows = isMultiLine
+        ? el.scrollHeight > el.clientHeight + 1
+        : el.scrollWidth > el.clientWidth + 1
+      setIsTruncated(overflows)
+    }
+    check()
+    const ro = new ResizeObserver(check)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [children, isMultiLine])
+
+  const clampClass = isMultiLine
+    ? LINE_CLAMP_CLASS[lines as Exclude<typeof lines, 1>]
+    : 'truncate block'
+
+  return (
+    <FloatingTooltip
+      content={tooltip ?? children}
+      side={side}
+      disabled={!isTruncated}
+      className="max-w-xs whitespace-pre-line [overflow-wrap:anywhere]"
+    >
+      <span
+        ref={ref}
+        className={cn(
+          VARIANT_CLASS[variant],
+          TONE_CLASS[tone],
+          mono && '[font-family:var(--font-family-heading)]',
+          clampClass,
+          className,
+        )}
+      >
+        {children}
+      </span>
+    </FloatingTooltip>
+  )
+}

package/src/components/user-summary-stub.tsx

@@ -102,13 +102,16 @@ export function UserSummary({
           )}
         </div>
         <div className="min-w-0 flex-1">
-          <p className="text-h4 text-ods-text-primary truncate">
+          <p
+            className="text-h4 text-ods-text-primary truncate"
+            title={mspPreview?.name ? `${name} • ${mspPreview.name}` : name}
+          >
             {name}
             {mspPreview?.name && (
               <span className="text-ods-text-secondary"> • {mspPreview.name}</span>
             )}
           </p>
-          <p className="text-h6 text-ods-text-secondary truncate">
+          <p className="text-h6 text-ods-text-secondary truncate" title={subtitle && subtitle.trim().length > 0 ? subtitle : (email && email.trim().length > 0 ? email : '\u00A0')}>
             {subtitle && subtitle.trim().length > 0 ? subtitle : (email && email.trim().length > 0 ? email : '\u00A0')}
           </p>
         </div>
@@ -154,34 +157,37 @@ export function UserSummary({
         <div className="flex-1 grid grid-cols-[1fr_auto] gap-4">
           {/* LEFT : text stack */}
           <div className="min-h-[6rem] flex flex-col justify-center space-y-3 truncate">
-          <p className="text-h2 text-ods-text-primary leading-none truncate">
+          <p className="text-h2 text-ods-text-primary leading-none truncate" title={name}>
             {name}
           </p>
-            <p className="text-h4 text-ods-text-secondary break-all truncate">
+            <p className="text-h4 text-ods-text-secondary break-all truncate" title={(subtitle && subtitle.trim().length > 0) ? subtitle : (email && email.trim().length > 0 ? email : '\u00A0')}>
               {(subtitle && subtitle.trim().length > 0) ? subtitle : (email && email.trim().length > 0 ? email : '\u00A0')}
             </p>
-            {mspPreview && (
-              <p className="text-h6 text-ods-text-primary truncate">
-                {/* Build string with separators */}
-                {[
-                  mspPreview.name ?? '—',
-                  typeof mspPreview.seatCount === 'number'
-                    ? `${formatNumber(mspPreview.seatCount)} Seats`
-                    : null,
-                  typeof mspPreview.technicianCount === 'number'
-                    ? `${formatNumber(mspPreview.technicianCount)} Technicians`
-                    : null,
-                  typeof mspPreview.annualRevenue === 'number'
-                    ? `$${formatNumber(mspPreview.annualRevenue)}`
-                    : null,
-                ]
-                  .filter(Boolean)
-                  .flatMap((txt, idx) => (idx === 0 ? [txt] : [' • ', txt]))
-                  .map((seg, idx) => (
-                    <span key={idx} className={seg === ' • ' ? 'text-ods-text-secondary' : ''}>{seg}</span>
-                  ))}
-              </p>
-            )}
+            {mspPreview && (() => {
+              const mspSegments = [
+                mspPreview.name ?? '—',
+                typeof mspPreview.seatCount === 'number'
+                  ? `${formatNumber(mspPreview.seatCount)} Seats`
+                  : null,
+                typeof mspPreview.technicianCount === 'number'
+                  ? `${formatNumber(mspPreview.technicianCount)} Technicians`
+                  : null,
+                typeof mspPreview.annualRevenue === 'number'
+                  ? `$${formatNumber(mspPreview.annualRevenue)}`
+                  : null,
+              ].filter(Boolean) as string[];
+              const mspTitle = mspSegments.join(' • ');
+              return (
+                <p className="text-h6 text-ods-text-primary truncate" title={mspTitle}>
+                  {/* Build string with separators */}
+                  {mspSegments
+                    .flatMap((txt, idx) => (idx === 0 ? [txt] : [' • ', txt]))
+                    .map((seg, idx) => (
+                      <span key={idx} className={seg === ' • ' ? 'text-ods-text-secondary' : ''}>{seg}</span>
+                    ))}
+                </p>
+              );
+            })()}
           </div>
 
           {/* RIGHT (desktop) */}

package/src/components/vendor-display-button.tsx

@@ -79,7 +79,7 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
           </span>
         </div>
       )}
-      <span className="text-h4 text-ods-text-primary truncate min-w-0">
+      <span className="text-h4 text-ods-text-primary truncate min-w-0" title={vendor.title}>
         {vendor.title}
       </span>
     </button>

package/src/stories/SplitButton.stories.tsx

@@ -1,5 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ChevronDown, ExternalLink, MoreVertical, Save, Trash2 } from 'lucide-react'
+import {
+  Chevron01DownIcon as ChevronDown,
+  Ellipsis02Icon as MoreVertical,
+  ExternalLinkIcon as ExternalLink,
+  FloppyDiscIcon as Save,
+  TrashIcon as Trash2,
+} from '../components/icons-v2-generated'
 import React from 'react'
 import { SplitButton } from '../components/ui/button'