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

package/src/components/loading/card-skeleton.tsx

@@ -1,259 +0,0 @@
-import { cn } from '../../utils/cn';
-import { LoadingRegion } from './loading-region';
-import { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } from './unified-skeleton';
-
-interface CardSkeletonProps {
-  className?: string;
-  /**
-   * Card layout variant
-   */
-  variant?: 'vendor' | 'blog' | 'alternative';
-  /**
-   * Show action buttons area
-   */
-  showActions?: boolean;
-  /**
-   * Show metadata footer
-   */
-  showMetadata?: boolean;
-  /** Optional tailwind classes to override the card container background & border */
-  containerClassName?: string;
-}
-
-/**
- * Unified card skeleton component for consistent card loading states
- *
- * Supports different card types used across the application:
- * - vendor: Vendor cards with logo, title, description, and actions
- * - blog: Blog post cards with image, title, summary, and metadata
- * - alternative: Alternative vendor cards in comparison lists
- *
- * A category card's loading box is `CategoryCardSkeleton`.
- */
-export function CardSkeleton({
-  className,
-  containerClassName,
-  variant = 'vendor',
-  showActions = true,
-  showMetadata = true,
-  ...props
-}: CardSkeletonProps) {
-  const cardContent = {
-    vendor: <VendorCardContent showMetadata={showMetadata} />,
-    blog: <BlogCardContent showActions={showActions} showMetadata={showMetadata} />,
-    alternative: <AlternativeCardContent showActions={showActions} />,
-  };
-
-  return (
-    <div
-      className={cn(
-        containerClassName || 'border border-ods-border bg-ods-card',
-        'overflow-hidden rounded-lg',
-        // Flex layouts for certain variants
-        variant === 'blog' && 'flex h-full flex-col',
-        variant === 'vendor' && 'flex h-full flex-col',
-        className,
-      )}
-      {...props}
-    >
-      {cardContent[variant]}
-    </div>
-  );
-}
-
-/**
- * Vendor card skeleton content - matches exact VendorCard structure
- */
-function VendorCardContent({ showMetadata }: { showMetadata: boolean }) {
-  return (
-    <div className="flex flex-col gap-3 p-4">
-      {/* Header Section - Row layout matching actual VendorCard */}
-      <div className="flex w-full items-start gap-3">
-        {/* Logo Frame - 60px width fixed, matching actual structure */}
-        <div className="flex h-[60px] w-[60px] flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg p-2">
-          <MediaSkeleton.Avatar size="sm" className="h-11 w-11" />
-        </div>
-
-        {/* Text Container - Column layout, matching actual structure */}
-        <div className="flex min-w-0 flex-1 flex-col justify-center space-y-1 py-2">
-          {/* Title - Single line with proper width */}
-          <TextSkeleton.Subheading className="w-3/4" />
-          {/* Category - Single line, shorter */}
-          <TextSkeleton.Caption className="w-1/2" />
-        </div>
-      </div>
-
-      {/* Description Section - Fixed 48px height matching actual VendorCard */}
-      <div className="flex h-12 w-full items-center overflow-hidden">
-        <div className="w-full space-y-1">
-          <TextSkeleton.Body className="w-full" />
-          <TextSkeleton.Body className="w-2/3" />
-        </div>
-      </div>
-
-      {/* Footer Section - Responsive layout matching actual structure */}
-      {showMetadata && (
-        <div className="flex w-full min-w-0 items-center justify-between gap-2">
-          {/* Stats Container - Flexible width, no overflow */}
-          <div className="flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4">
-            {/* OpenMSP Score skeleton */}
-            <div className="flex flex-shrink-0 items-center gap-1">
-              <MediaSkeleton.Icon size="sm" className="h-5 w-5" />
-              <TextSkeleton.Caption className="w-8" />
-            </div>
-
-            {/* GitHub Stats skeleton */}
-            <div className="flex flex-shrink-0 items-center gap-1">
-              <MediaSkeleton.Icon size="sm" className="h-5 w-5" />
-              <TextSkeleton.Caption className="w-10" />
-            </div>
-          </div>
-
-          {/* Tag Section - Contained within card boundaries */}
-          <div className="flex-shrink-0">
-            <div className="flex items-center gap-1.5 rounded border border-ods-border bg-ods-bg px-2.5 py-1.5">
-              <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-sm bg-ods-border">
-                <MediaSkeleton.Icon size="sm" className="h-2.5 w-2.5" />
-              </div>
-              <TextSkeleton.Caption className="w-16" />
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * Blog card skeleton content - matches fixed height structure
- */
-function BlogCardContent({ showActions, showMetadata }: { showActions: boolean; showMetadata: boolean }) {
-  return (
-    <>
-      {/* Image Section — OG 1200×630 aspect (matches blog-card.tsx loaded state) */}
-      <div className="blog-card-image-container relative aspect-[1200/630] w-full overflow-hidden bg-ods-bg">
-        <MediaSkeleton.CardImage />
-      </div>
-
-      {/* Content - Fixed height structure to match BlogCard */}
-      <div className="flex flex-grow flex-col p-4">
-        {/* Title Section - Fixed 2 lines with vertical centering */}
-        <div className="mb-3 flex min-h-[50.4px] items-center content-md:min-h-[56px] content-lg:min-h-[61.6px]">
-          <div className="w-full space-y-1">
-            <TextSkeleton.Subheading className="w-full" />
-            <TextSkeleton.Subheading className="w-3/4" />
-          </div>
-        </div>
-
-        {/* Chips Section - Fixed single line height */}
-        <div className="mb-3 flex h-[28px] items-center gap-2">
-          <InteractiveSkeleton.Chip className="w-16" />
-          <InteractiveSkeleton.Chip className="w-12" />
-        </div>
-
-        {/* Description Section - Fixed 2 lines with vertical centering */}
-        <div className="mb-3 flex min-h-[42px] items-center content-md:min-h-[45px] content-lg:min-h-[48px]">
-          <div className="w-full space-y-1">
-            <TextSkeleton.Body className="w-full" />
-            <TextSkeleton.Body className="w-1/2" />
-          </div>
-        </div>
-
-        {/* Actions - only if requested */}
-        {showActions && (
-          <div className="pt-2">
-            <InteractiveSkeleton.Button className="h-8 w-24" />
-          </div>
-        )}
-
-        {/* Metadata footer - Matches BlogMeta horizontal layout */}
-        {showMetadata && (
-          <div className="mt-auto">
-            <div className="flex items-center justify-between gap-4 border-t border-ods-border pt-4">
-              {/* Author section - matches AuthorMeta */}
-              <div className="flex min-w-0 flex-1 items-center gap-2">
-                <MediaSkeleton.Avatar size="sm" />
-                <TextSkeleton.Caption className="w-16" />
-              </div>
-
-              {/* Date and reading time section - matches BlogMeta right side */}
-              <div className="flex shrink-0 items-center gap-3 text-ods-text-muted">
-                <TextSkeleton.Caption className="w-12" />
-                {/* Separator dot */}
-                <UnifiedSkeleton variant="circular" className="h-1 w-1" />
-                <TextSkeleton.Caption className="w-16" />
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
-
-/**
- * Alternative card skeleton content (for vendor alternatives/comparisons)
- */
-function AlternativeCardContent({ showActions }: { showActions: boolean }) {
-  return (
-    <div className="flex items-start gap-4 p-4">
-      <MediaSkeleton.Avatar size="md" className="flex-shrink-0" />
-
-      <div className="flex-1 space-y-2">
-        <div className="flex items-center justify-between">
-          <TextSkeleton.Subheading className="w-1/3" />
-          <TextSkeleton.Caption className="w-16" />
-        </div>
-
-        <div className="space-y-1">
-          <TextSkeleton.Body className="w-full" />
-          <TextSkeleton.Body className="w-5/6" />
-        </div>
-
-        {showActions && (
-          <div className="pt-2">
-            <InteractiveSkeleton.Button className="h-8 w-20" />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Grid of card skeletons for loading lists
- */
-export function CardSkeletonGrid({
-  region = true,
-  count = 6,
-  variant = 'vendor',
-  className,
-  containerClassName,
-  ...props
-}: {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-  count?: number;
-  variant?: CardSkeletonProps['variant'];
-  className?: string;
-  containerClassName?: string;
-} & Omit<CardSkeletonProps, 'variant'>) {
-  return (
-    <LoadingRegion
-      label={`Loading ${variant} cards`}
-      announce={region}
-      className={cn(
-        'grid gap-4 content-md:gap-6',
-        // Responsive grid based on card type
-        variant === 'vendor' && 'grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-3',
-        variant === 'blog' && 'grid-cols-1 content-md:grid-cols-2',
-        variant === 'alternative' && 'grid-cols-1',
-        className,
-      )}
-    >
-      {Array.from({ length: count }, (_, index) => (
-        <CardSkeleton key={index} variant={variant} containerClassName={containerClassName} {...props} />
-      ))}
-    </LoadingRegion>
-  );
-}

package/src/components/loading/category-card-skeleton.tsx

@@ -1,36 +0,0 @@
-import { cn } from '../../utils/cn';
-import { UnifiedSkeleton, TextSkeleton } from './unified-skeleton';
-
-interface CategoryCardSkeletonProps {
-  className?: string;
-}
-
-export function CategoryCardSkeleton({ className }: CategoryCardSkeletonProps) {
-  return (
-    <article
-      className={cn(
-        'box-border flex min-w-0 flex-col rounded-[12px] border border-ods-border bg-ods-card p-8',
-        className,
-      )}
-    >
-      {/* Icons row */}
-      <div className="mb-8 flex items-center justify-center gap-6">
-        {Array.from({ length: 10 }).map((_, i) => (
-          <UnifiedSkeleton key={i} variant="circular" className="h-10 w-10 flex-shrink-0" />
-        ))}
-      </div>
-
-      {/* Text block */}
-      <div className="flex flex-1 flex-col space-y-3">
-        <TextSkeleton.Heading className="w-3/4" />
-        <TextSkeleton.Body className="w-1/2" />
-        <TextSkeleton.Body className="w-full" />
-      </div>
-
-      {/* Arrow button placeholder */}
-      <div className="mt-4 flex justify-end">
-        <UnifiedSkeleton className="h-12 w-12 rounded-[6px]" />
-      </div>
-    </article>
-  );
-}

package/src/components/loading/category-vendor-selector-skeleton.tsx

@@ -1,51 +0,0 @@
-import { cn } from '../../utils/cn';
-import { LoadingRegion } from './loading-region';
-import { TextSkeleton, UnifiedSkeleton } from './unified-skeleton';
-
-interface CategoryVendorSelectorSkeletonProps {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-  /** number of subcategory blocks to render */
-  subcategories?: number;
-  className?: string;
-}
-
-/**
- * @deprecated Render the selector itself inside a `LoadingScope`: its parts draw their own skeletons. Kept so hosts on an older release keep compiling; nothing in the lib uses it.
- */
-// loading-standard-ok: deprecated re-export kept for external consumers
-export function CategoryVendorSelectorSkeleton({
-  region = true,
-  subcategories = 3,
-  className,
-}: CategoryVendorSelectorSkeletonProps) {
-  return (
-    <LoadingRegion
-      label="Loading categories"
-      announce={region}
-      className={cn('rounded-lg border border-ods-border bg-ods-card p-6', className)}
-    >
-      {/* Header */}
-      <div className="mb-6 max-w-xl space-y-2">
-        <TextSkeleton.Heading className="w-1/2" />
-        <TextSkeleton.Body className="w-3/4" />
-      </div>
-
-      {/* Subcategory blocks */}
-      <div className="space-y-6">
-        {Array.from({ length: subcategories }).map((_, idx) => (
-          <div key={idx} className="space-y-2">
-            {/* Subcategory title */}
-            <TextSkeleton.Subheading className="w-1/3" />
-            {/* Vendor slots container */}
-            <div className="grid grid-cols-2 gap-4 content-md:grid-cols-3">
-              {Array.from({ length: 2 }).map((__, j) => (
-                <UnifiedSkeleton key={j} className="h-20 rounded-lg" />
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </LoadingRegion>
-  );
-}

package/src/components/loading/deprecated-layout-skeletons.tsx

@@ -1,133 +0,0 @@
-import { cn } from '../../utils/cn';
-import { CardSkeletonGrid } from './card-skeleton';
-import { LoadingRegion } from './loading-region';
-import { UnifiedSkeleton } from './unified-skeleton';
-
-interface LoadingLayoutProps {
-  className?: string;
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-}
-
-/**
- * @deprecated Draw the blog list itself: its cards draw their own skeletons in a `LoadingScope`. Kept so hosts on an
- * older release keep compiling.
- *
- * Blog Card Grid Skeleton - Always displays exactly 4 blog card skeletons
- * Used for consistent blog page layout with predictable height
- */
-// loading-standard-ok: deprecated re-export kept for external consumers
-export function BlogCardGridSkeleton({ className, region = true }: LoadingLayoutProps) {
-  return (
-    <div className={cn('space-y-6', className)}>
-      <CardSkeletonGrid count={4} variant="blog" region={region} className="grid-cols-1 content-md:grid-cols-2" />
-    </div>
-  );
-}
-
-/**
- * @deprecated The Slack community section is the host's own component, which draws its own skeleton. Kept so hosts
- * on an older release keep compiling.
- *
- * Slack Community Section Skeleton
- * Matches SlackCommunity component structure with title, channel list, and chat interface
- */
-// loading-standard-ok: deprecated re-export kept for external consumers
-export function SlackCommunitySkeleton({ region = true }: { region?: boolean } = {}) {
-  return (
-    <LoadingRegion
-      label="Loading the Slack community"
-      as="section"
-      announce={region}
-      className="w-full bg-ods-bg px-4 py-12 content-md:px-20 content-md:py-20 content-lg:px-20"
-    >
-      {/* Frame 651 Container */}
-      <div className="flex w-full flex-col gap-4 content-md:gap-6">
-        {/* Title Skeleton */}
-        <div className="w-full">
-          <UnifiedSkeleton className="h-8 max-w-md rounded-lg content-md:h-12 content-lg:h-14" />
-        </div>
-
-        {/* Content Area - Channel List + Chat Interface */}
-        <div className="flex w-full min-w-0 flex-col gap-4 content-md:gap-6 content-lg:flex-row content-lg:items-start content-lg:justify-end">
-          {/* Channel List Skeleton */}
-          <div className="flex w-full flex-shrink-0 flex-col overflow-hidden rounded border border-ods-border bg-ods-bg content-lg:w-[290px] content-lg:max-w-[290px]">
-            <div className="space-y-4 p-4">
-              {/* Header */}
-              <div className="flex flex-col gap-2">
-                <div className="flex items-center justify-between">
-                  <UnifiedSkeleton className="h-4 w-24 rounded" />
-                  <UnifiedSkeleton className="h-3 w-16 rounded" />
-                </div>
-                <UnifiedSkeleton className="h-3 w-32 rounded" />
-              </div>
-
-              {/* Channels */}
-              <div className="flex flex-col gap-1">
-                <UnifiedSkeleton className="mb-2 h-3 w-16 rounded" />
-                {Array.from({ length: 5 }).map((_, i) => (
-                  <div key={i} className="flex min-h-[48px] items-center gap-2 px-2 py-3">
-                    <UnifiedSkeleton className="h-4 w-4 rounded" />
-                    <div className="flex-1">
-                      <UnifiedSkeleton className="mb-1 h-3 w-24 rounded" />
-                      <UnifiedSkeleton className="h-2 w-16 rounded" />
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Stats */}
-              <div className="mt-2 border-t border-ods-border pt-3">
-                <div className="space-y-2">
-                  <div className="flex justify-between">
-                    <UnifiedSkeleton className="h-3 w-16 rounded" />
-                    <UnifiedSkeleton className="h-3 w-8 rounded" />
-                  </div>
-                  <div className="flex justify-between">
-                    <UnifiedSkeleton className="h-3 w-20 rounded" />
-                    <UnifiedSkeleton className="h-3 w-8 rounded" />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Chat Interface Skeleton */}
-          <div className="flex h-[450px] min-h-[450px] min-w-0 flex-1 flex-col rounded-lg border border-ods-border bg-ods-card content-md:h-[500px] content-md:min-h-[500px] content-lg:h-[600px] content-lg:min-h-[600px]">
-            {/* Header */}
-            <div className="flex h-[56px] flex-shrink-0 items-center justify-between border-b border-ods-border bg-ods-bg p-4 content-md:h-[60px] content-md:p-6">
-              <div className="flex items-center gap-2">
-                <UnifiedSkeleton className="h-3 w-3 rounded content-md:h-4 content-md:w-4" />
-                <UnifiedSkeleton className="h-3 w-24 rounded content-md:h-4 content-md:w-32" />
-              </div>
-              <UnifiedSkeleton className="h-3 w-12 rounded content-md:w-16" />
-            </div>
-
-            {/* Messages */}
-            <div className="min-h-[280px] flex-1 space-y-3 overflow-hidden bg-ods-bg p-4 content-md:min-h-[320px] content-md:space-y-4 content-md:p-6 content-lg:min-h-[420px]">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <div key={i} className="flex gap-2 content-md:gap-3">
-                  <UnifiedSkeleton className="h-10 w-10 flex-shrink-0 rounded-lg content-md:h-12 content-md:w-12" />
-                  <div className="flex-1">
-                    <div className="mb-1 flex items-center gap-2">
-                      <UnifiedSkeleton className="h-3 w-16 rounded content-md:w-20" />
-                      <UnifiedSkeleton className="h-3 w-12 rounded content-md:w-16" />
-                    </div>
-                    <UnifiedSkeleton className="h-3 w-full rounded content-md:h-4" />
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            {/* Input Area */}
-            <div className="h-[72px] flex-shrink-0 border-t border-ods-border bg-ods-card p-4 content-md:h-[80px] content-md:p-6">
-              <div className="flex items-end justify-center gap-3 content-md:justify-end">
-                <UnifiedSkeleton className="h-10 w-28 rounded-lg content-md:h-12 content-md:w-32" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </LoadingRegion>
-  );
-}

package/src/components/loading/device-card-skeleton.tsx

@@ -1,100 +0,0 @@
-import { cn } from '../../utils/cn';
-import { LoadingRegion } from './loading-region';
-import { TextLineSkeleton, UnifiedSkeleton } from './unified-skeleton';
-
-export interface DeviceCardSkeletonProps {
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-  /** Hold `DeviceCard`'s "more" button (its `actions.moreButton`). Default `true`. */
-  moreButton?: boolean;
-  /**
-   * Hold the box of `DeviceCard`'s `actions.detailsButton.component` with these size classes
-   * (e.g. `'h-12 w-[88px]'`). Omit when the card has no details button.
-   */
-  detailsButtonClassName?: string;
-}
-
-/**
- * DeviceCardSkeleton: the loading box of `DeviceCard` (`ui/device-card.tsx`), box for box:
- * the same container classes, then
- * - Row 1: the bordered device-icon box, the OS icon and name line (`text-h4`) over the
- *   organization line (`text-h6`), the bordered "more" button (`moreButton`) and/or the details
- *   button's box (`detailsButtonClassName`);
- * - Row 2: the status tag (`Tag`'s `h-8`) and the "Last seen" line (`text-h6`).
- *
- * The loaded card replaces it with no movement.
- */
-export function DeviceCardSkeleton({ className, moreButton = true, detailsButtonClassName }: DeviceCardSkeletonProps) {
-  return (
-    <div
-      className={cn(
-        'overflow-clip rounded-[6px] border border-ods-border bg-ods-card',
-        'flex flex-col gap-4 p-4',
-        className,
-      )}
-    >
-      {/* Row 1: device icon | name over organization | more button */}
-      <div className="flex w-full items-center gap-4">
-        <div className="flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-2">
-          <UnifiedSkeleton className="size-4 rounded" />
-        </div>
-        <div className="flex min-w-0 flex-1 flex-col justify-center">
-          {/* OS icon (16px) + name, one `text-h4` line */}
-          <div className="flex items-center gap-1 text-h4">
-            <UnifiedSkeleton className="size-4 shrink-0 rounded" />
-            <TextLineSkeleton type="inherit" className="w-3/4" />
-          </div>
-          <TextLineSkeleton type="h6" className="w-1/2" />
-        </div>
-        {moreButton && (
-          <div className="flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-3">
-            <UnifiedSkeleton className="size-6 rounded" />
-          </div>
-        )}
-        {detailsButtonClassName && <UnifiedSkeleton className={cn('shrink-0 rounded-[6px]', detailsButtonClassName)} />}
-      </div>
-
-      {/* Row 2: status tag | last seen */}
-      <div className="flex w-full items-center gap-2">
-        <UnifiedSkeleton className="h-8 w-20 shrink-0 rounded-md" />
-        <div className="min-w-0 flex-1 text-h6">
-          <TextLineSkeleton type="inherit" className="w-40 max-w-full" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/**
- * DeviceCardSkeletonGrid - Grid of device card skeletons
- *
- * Matches DevicesGrid layout with responsive columns:
- * - Mobile: 1 column
- * - Tablet (md): 2 columns
- * - Desktop (lg): 3 columns
- * - Large (xl): 4 columns
- */
-export function DeviceCardSkeletonGrid({
-  region = true,
-  count = 12,
-  className,
-}: {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-  count?: number;
-  className?: string;
-}) {
-  return (
-    <LoadingRegion
-      label="Loading devices"
-      announce={region}
-      className={cn('grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-4', className)}
-    >
-      {Array.from({ length: count }, (_, index) => (
-        <DeviceCardSkeleton key={index} />
-      ))}
-    </LoadingRegion>
-  );
-}