@flamingo-stack/openframe-frontend-core 0.0.776 → 0.0.781

package/src/components/ui/date-picker.tsx

@@ -623,31 +623,6 @@ export function DatePickerCalendar({
   );
 }
 
-// ============================================================================
-// Trigger button styles (shared)
-// ============================================================================
-
-const triggerButtonStyles = cn(
-  // Layout
-  'flex w-full items-center gap-2',
-  'h-11 rounded-[6px] border px-3 md:h-12',
-  // Colors
-  'border-ods-border bg-ods-card',
-  // Typography
-  'text-h4',
-  // Hover & active (not disabled)
-  'enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active',
-  'focus:outline-none',
-  // Disabled - match Input exactly. The value/placeholder span inside sets its
-  // own colour, so the child rule (higher specificity) greys it too. Scoped to
-  // DIRECT children like every other field, so nested content that owns its
-  // colour keeps it.
-  'disabled:!cursor-not-allowed disabled:bg-ods-bg',
-  'disabled:text-ods-text-disabled disabled:[&>span]:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled',
-  // Animation
-  'transition-colors duration-200',
-);
-
 const timeSelectTriggerStyles = cn(
   'flex items-center justify-between gap-1',
   'h-11 min-h-0 rounded-[6px] border px-3 md:h-12',
@@ -723,30 +698,25 @@ export function DatePicker(props: DatePickerProps) {
   const picker = (
     <Popover.Root open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
-        <button
+        <Button
+          variant="field"
           type="button"
           disabled={disabled}
           // Same marker Input/Textarea/Select expose — it is how a form finds
           // (and scrolls to) the first field that failed validation.
           data-invalid={isInvalid || undefined}
-          className={cn(
-            triggerButtonStyles,
-            'group',
-            open && !isInvalid && 'border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card',
-            isInvalid && 'border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card',
-            className,
-          )}
+          className={className}
         >
           <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
           <span
             className={cn(
               'flex-1 truncate text-left',
-              displayValue ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+              disabled ? 'text-ods-text-disabled' : displayValue ? 'text-ods-text-primary' : 'text-ods-text-secondary',
             )}
           >
             {displayValue || placeholder}
           </span>
-        </button>
+        </Button>
       </Popover.Trigger>
 
       <Popover.Portal container={portalContainer ?? undefined}>
@@ -910,30 +880,29 @@ export function DatePickerInput(props: DatePickerInputProps) {
       {/* Date Picker */}
       <Popover.Root open={open} onOpenChange={setOpen}>
         <Popover.Trigger asChild>
-          <button
+          <Button
+            variant="field"
             type="button"
             disabled={disabled}
             // Same marker Input/Textarea/Select expose — it is how a form finds
             // (and scrolls to) the first field that failed validation.
             data-invalid={isInvalid || undefined}
-            className={cn(
-              triggerButtonStyles,
-              'group',
-              open && !isInvalid && 'border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card',
-              isInvalid && 'border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card',
-              'flex-1',
-            )}
+            className="flex-1"
           >
             <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
             <span
               className={cn(
                 'flex-1 truncate text-left',
-                displayValue ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+                disabled
+                  ? 'text-ods-text-disabled'
+                  : displayValue
+                    ? 'text-ods-text-primary'
+                    : 'text-ods-text-secondary',
               )}
             >
               {displayValue || placeholder}
             </span>
-          </button>
+          </Button>
         </Popover.Trigger>
 
         <Popover.Portal container={portalContainer ?? undefined}>
@@ -1140,30 +1109,29 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
       {/* Date Picker */}
       <Popover.Root open={open} onOpenChange={setOpen}>
         <Popover.Trigger asChild>
-          <button
+          <Button
+            variant="field"
             type="button"
             disabled={disabled}
             // Same marker Input/Textarea/Select expose — it is how a form finds
             // (and scrolls to) the first field that failed validation.
             data-invalid={isInvalid || undefined}
-            className={cn(
-              triggerButtonStyles,
-              'group',
-              open && !isInvalid && 'border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card',
-              isInvalid && 'border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card',
-              'flex-1',
-            )}
+            className="flex-1"
           >
             <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
             <span
               className={cn(
                 'flex-1 truncate text-left',
-                displayValue ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+                disabled
+                  ? 'text-ods-text-disabled'
+                  : displayValue
+                    ? 'text-ods-text-primary'
+                    : 'text-ods-text-secondary',
               )}
             >
               {displayValue || placeholder}
             </span>
-          </button>
+          </Button>
         </Popover.Trigger>
 
         <Popover.Portal container={portalContainer ?? undefined}>

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

@@ -7,8 +7,30 @@ import type { OSPlatformId } from '../../utils/os-platforms';
 import { OSTypeIcon } from '../features/os-type-badge';
 import { MonitorIcon } from '../icons-v2-generated/devices/monitor-icon';
 import { Ellipsis01Icon } from '../icons-v2-generated/interface';
+import { MediaSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 import { Tag, type TagProps } from './tag';
 
+/** The card's frame. */
+const DEVICE_CARD_FRAME_CLASS =
+  'flex flex-col gap-4 overflow-clip rounded-[6px] border border-ods-border bg-ods-card p-4';
+/** The card's first row: the device icon, the name stack, the buttons. */
+const DEVICE_CARD_HEAD_ROW_CLASS = 'flex w-full items-center gap-4';
+/** The name stack: the OS icon and name line over the organization line. */
+const DEVICE_CARD_NAME_STACK_CLASS = 'flex min-w-0 flex-1 flex-col justify-center';
+/** The OS icon and the name, one `text-h4` line. */
+const DEVICE_CARD_NAME_LINE_CLASS = 'flex items-center gap-1 text-h4';
+/** The card's status row: the status tag and the "Last Seen:" line. */
+const DEVICE_CARD_STATUS_ROW_CLASS = 'flex w-full items-center gap-2';
+/** The bordered box of the device-type icon. */
+const DEVICE_CARD_ICON_BOX_CLASS =
+  'flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-2';
+/** The bordered "more" button. */
+/** The tags row, loaded and loading. */
+const DEVICE_CARD_TAGS_ROW_CLASS = 'flex w-full flex-wrap items-center gap-2';
+const DEVICE_CARD_MORE_BUTTON_CLASS =
+  'flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-3';
+
 export interface Device {
   id?: string;
   machineId?: string;
@@ -49,6 +71,12 @@ export interface DeviceCardProps extends React.HTMLAttributes<HTMLDivElement> {
   };
   statusTag?: TagProps;
   onDeviceClick?: (device: Device) => void;
+  /**
+   * The device is still being read: the card keeps its ONE structure, inert, with its icon, its buttons and its labels
+   * drawn for real and every read value (OS icon, name, organization, status, last seen) its own skeleton. A loading
+   * scope does the same. The card's `data-*` markers (`data-loading-item`) ride on its root in both forms.
+   */
+  loading?: boolean;
 }
 
 export function DeviceCard({
@@ -58,9 +86,13 @@ export function DeviceCard({
   },
   statusTag,
   onDeviceClick,
+  loading: loadingProp,
   className,
   ...props
 }: DeviceCardProps) {
+  // ONE switch: in a page's loading state (or while the host reads the device) the card draws its read values as
+  // skeletons, in the same boxes; its static parts stay real and the whole card is inert.
+  const loading = useLoadingScope() || !!loadingProp;
   // "Last seen" is read as "your local time", the same way the devices table
   // column renders it: the viewer's zone and locale, never UTC.
   const formatLastSeen = (lastSeen?: string | Date) => {
@@ -71,47 +103,57 @@ export function DeviceCard({
 
   return (
     <div
-      onClick={onDeviceClick ? () => onDeviceClick(device) : undefined}
-      className={cn(
-        'overflow-clip rounded-[6px] border border-ods-border bg-ods-card',
-        'flex flex-col gap-4 p-4',
-        onDeviceClick && 'cursor-pointer',
-        className,
-      )}
+      onClick={onDeviceClick && !loading ? () => onDeviceClick(device) : undefined}
+      className={cn(DEVICE_CARD_FRAME_CLASS, onDeviceClick && !loading && 'cursor-pointer', className)}
+      inert={loading || undefined}
+      aria-hidden={loading || undefined}
       {...props}
     >
       {/* Row 1: Device icon | OS icon + Name + Organization | More button | Details button | Custom actions */}
-      <div className="flex w-full items-center gap-4">
+      <div className={DEVICE_CARD_HEAD_ROW_CLASS}>
         {/* Device type icon */}
-        <div className="flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-2">
+        <div className={DEVICE_CARD_ICON_BOX_CLASS}>
           <MonitorIcon className="text-ods-text-secondary" size={16} />
         </div>
 
         {/* OS icon + Device name + Organization (stacked) */}
-        <div className="flex min-w-0 flex-1 flex-col justify-center">
-          <div className="flex items-center gap-1">
-            {device.operatingSystem && (
-              <OSTypeIcon
-                osType={device.operatingSystem === 'macos' ? 'darwin' : device.operatingSystem}
-                size="w-4 h-4"
-                className="shrink-0"
-              />
+        <div className={DEVICE_CARD_NAME_STACK_CLASS}>
+          <div className={DEVICE_CARD_NAME_LINE_CLASS}>
+            {loading ? (
+              <>
+                <MediaSkeleton.Icon size="sm" className="shrink-0" />
+                <TextLineSkeleton type="inherit" className="w-3/4" />
+              </>
+            ) : (
+              <>
+                {device.operatingSystem && (
+                  <OSTypeIcon
+                    osType={device.operatingSystem === 'macos' ? 'darwin' : device.operatingSystem}
+                    size="w-4 h-4"
+                    className="shrink-0"
+                  />
+                )}
+                <span className="truncate text-ods-text-primary" title={device.name}>
+                  {device.name}
+                </span>
+              </>
             )}
-            <span className="truncate text-ods-text-primary text-h4" title={device.name}>
-              {device.name}
-            </span>
           </div>
-          {device.organization && (
-            <span className="truncate text-ods-text-secondary text-h6" title={device.organization}>
-              {device.organization}
-            </span>
+          {loading ? (
+            <TextLineSkeleton type="h6" className="w-1/2" />
+          ) : (
+            device.organization && (
+              <span className="truncate text-ods-text-secondary text-h6" title={device.organization}>
+                {device.organization}
+              </span>
+            )
           )}
         </div>
 
         {/* More button */}
         {actions.moreButton?.visible !== false && (
           <div
-            className="flex shrink-0 cursor-pointer items-center justify-center rounded-[6px] border border-ods-border p-3 transition-colors hover:bg-ods-bg-hover"
+            className={cn(DEVICE_CARD_MORE_BUTTON_CLASS, 'cursor-pointer transition-colors hover:bg-ods-bg-hover')}
             onClick={e => {
               e.stopPropagation();
               actions.moreButton?.onClick?.();
@@ -146,33 +188,47 @@ export function DeviceCard({
         )}
       </div>
 
-      {/* Row 2: Status badge | Last seen */}
-      {(statusTag || device.lastSeen) && (
-        <div className="flex w-full items-center gap-2">
-          {statusTag && (
+      {/* Row 2: Status badge | Last seen (both drawn while loading: the tag and the time are read) */}
+      {(loading || statusTag || device.lastSeen) && (
+        <div className={DEVICE_CARD_STATUS_ROW_CLASS}>
+          {(loading || statusTag) && (
             <Tag
-              variant={statusTag.variant}
-              icon={statusTag.icon}
-              onClose={statusTag.onClose}
-              className={statusTag.className}
-              label={statusTag.label}
+              loading={loading}
+              variant={statusTag?.variant}
+              icon={statusTag?.icon}
+              onClose={statusTag?.onClose}
+              className={statusTag?.className}
+              label={statusTag?.label ?? ''}
             />
           )}
-          {device.lastSeen && (
-            <span className="flex-1 truncate text-ods-text-secondary text-h6">
-              Last Seen: {formatLastSeen(device.lastSeen)}
+          {(loading || device.lastSeen) && (
+            <span className="flex min-w-0 flex-1 items-center gap-1 text-ods-text-secondary text-h6">
+              <span className="shrink-0">Last Seen:</span>
+              {loading ? (
+                <TextLineSkeleton type="inherit" as="span" className="w-28 max-w-full" />
+              ) : (
+                <span className="truncate">{formatLastSeen(device.lastSeen)}</span>
+              )}
             </span>
           )}
         </div>
       )}
 
-      {/* Tags section */}
-      {device.tags && device.tags.length > 0 && (
-        <div className="flex w-full flex-wrap items-center gap-2">
-          {device.tags.map((tag, index) => (
-            <Tag key={index} variant="outline" label={tag} />
-          ))}
+      {/* Tags section: the card sits in a grid's first screen, so its row is drawn while loading too (one tag, a
+          typical device's), never left to land later. A device with no tags draws no row once loaded. */}
+      {loading ? (
+        <div className={DEVICE_CARD_TAGS_ROW_CLASS}>
+          <Tag loading label="" variant="outline" data-loading-item />
         </div>
+      ) : (
+        device.tags &&
+        device.tags.length > 0 && (
+          <div className={DEVICE_CARD_TAGS_ROW_CLASS}>
+            {device.tags.map((tag, index) => (
+              <Tag key={index} variant="outline" label={tag} data-loading-item />
+            ))}
+          </div>
+        )
       )}
     </div>
   );

package/src/components/ui/entity-image.tsx

@@ -87,10 +87,7 @@ export function EntityImage({ src, alt, fallbackText, sizeClassName, className }
 }
 
 /** An EntityImage while its record is read: a box of the image's own size and corner. */
-export function EntityImageSkeleton({
-  sizeClassName,
-  className,
-}: Pick<EntityImageProps, 'sizeClassName' | 'className'>) {
+function EntityImageSkeleton({ sizeClassName, className }: Pick<EntityImageProps, 'sizeClassName' | 'className'>) {
   return (
     <UnifiedSkeleton
       className={cn('shrink-0', ENTITY_IMAGE_RADIUS_CLASS, sizeClassName ?? ENTITY_IMAGE_SIZE, className)}

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

@@ -81,6 +81,10 @@ export interface FeatureCardGridSkeletonShape {
   contentType?: 'h4' | 'h6';
 }
 
+/** Items a loading grid draws when it is told neither a count nor its columns: one row of the grid's default three
+ *  columns (`FeatureCardGridView`'s `columns`). */
+const FEATURE_CARD_GRID_SKELETON_ITEMS = 3;
+
 const GRID_COLUMNS = {
   2: 'grid-cols-1 content-md:grid-cols-2',
   3: 'grid-cols-1 content-md:grid-cols-3',
@@ -332,7 +336,7 @@ export function FeatureCardGrid({ skeleton, ...props }: FeatureCardGridProps) {
  * A FeatureCardGrid while its items are read: the same grid (its columns, hairlines and item padding), each
  * item's eyebrow, title, subtitle and copy a bar of its own line height, its picture a box.
  */
-export function FeatureCardGridSkeleton({
+function FeatureCardGridSkeleton({
   count,
   eyebrow,
   subtitle,
@@ -341,12 +345,15 @@ export function FeatureCardGridSkeleton({
   contentType = 'h4',
   ...grid
 }: Omit<FeatureCardGridProps, 'items' | 'loading' | 'skeleton'> & FeatureCardGridSkeletonShape) {
-  const items: FeatureCardItem[] = Array.from({ length: count ?? grid.columns ?? 3 }, (_, index) => ({
-    title: '',
-    eyebrow: eyebrow ? String(index + 1).padStart(2, '0') : undefined,
-    subtitle: subtitle ? '-' : undefined,
-    media: media ? <UnifiedSkeleton className={media} /> : undefined,
-    content: contentLines ? <TextLineSkeleton type={contentType} lines={contentLines} className="w-full" /> : null,
-  }));
+  const items: FeatureCardItem[] = Array.from(
+    { length: count ?? grid.columns ?? FEATURE_CARD_GRID_SKELETON_ITEMS },
+    (_, index) => ({
+      title: '',
+      eyebrow: eyebrow ? String(index + 1).padStart(2, '0') : undefined,
+      subtitle: subtitle ? '-' : undefined,
+      media: media ? <UnifiedSkeleton className={media} /> : undefined,
+      content: contentLines ? <TextLineSkeleton type={contentType} lines={contentLines} className="w-full" /> : null,
+    }),
+  );
   return <FeatureCardGridView {...grid} items={items} loading loadingKeepsEyebrow={eyebrow === 'index'} />;
 }

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

@@ -5,7 +5,7 @@ import { cn } from '../../utils/cn';
 import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from './button';
 import { useLoadingScope } from './loading-scope';
-import { NumberedStep, NumberedStepSkeleton } from './numbered-step';
+import { NumberedStep } from './numbered-step';
 
 export interface FeatureListItemData {
   /** Shown in the boxed slot. Not used by the `numbered` variant. */
@@ -134,7 +134,7 @@ export function FeatureList({
  * A FeatureList while its items are read: the same list, `count` rows. A numbered row keeps its number; a boxed
  * row's icon is a box of the icon's frame; every title and description is a bar of its own line height.
  */
-export function FeatureListSkeleton({
+function FeatureListSkeleton({
   count = FEATURE_LIST_SKELETON_COUNT,
   variant = 'boxed',
   iconBoxSize = 72,
@@ -151,7 +151,7 @@ export function FeatureListSkeleton({
       <ol className={`${NUMBERED_LIST_CLASS} ${className}`} aria-hidden>
         {rows.map(index => (
           <li key={index}>
-            <NumberedStepSkeleton number={index + 1} />
+            <NumberedStep loading number={index + 1} title="" />
           </li>
         ))}
       </ol>

package/src/components/ui/field-value-skeleton.tsx

@@ -0,0 +1,11 @@
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { FIELD_VALUE_SKELETON_CLASS } from './input-styles';
+
+/**
+ * A field's value (or placeholder) while it is read: the `text-h4` bar in the field's value slot. Drawn by `Input`,
+ * `SelectTrigger` and `InputTrigger` in a loading scope, so every field draws the same bar in the same place, between
+ * its own real adornments.
+ */
+export function FieldValueSkeleton() {
+  return <TextLineSkeleton type="h4" className={FIELD_VALUE_SKELETON_CLASS} />;
+}

package/src/components/ui/file-manager/file-manager-breadcrumb.tsx

@@ -3,6 +3,7 @@
 import { ChevronRight } from 'lucide-react';
 import React from 'react';
 import { cn } from '../../../utils/cn';
+import { Button } from '../button';
 import type { FileManagerBreadcrumbProps } from './types';
 
 export function FileManagerBreadcrumb({ items, onItemClick, className }: FileManagerBreadcrumbProps) {
@@ -11,16 +12,17 @@ export function FileManagerBreadcrumb({ items, onItemClick, className }: FileMan
       {items.map((item, index) => (
         <React.Fragment key={item.path}>
           {index > 0 && <ChevronRight className="h-4 w-4 flex-shrink-0 text-ods-text-tertiary" />}
-          <button
+          <Button
+            variant="link"
+            size="compact"
+            noPaddingX
+            type="button"
+            aria-current={index === items.length - 1 ? 'page' : undefined}
             onClick={() => onItemClick?.(item.path)}
-            className={cn(
-              'shrink-0 rounded px-1 py-0.5 transition-colors hover:bg-ods-bg-hover',
-              'break-all text-left text-ods-text-primary hover:text-ods-accent',
-              index === items.length - 1 && 'font-medium',
-            )}
+            className="shrink-0"
           >
             {item.label}
-          </button>
+          </Button>
         </React.Fragment>
       ))}
     </nav>