aural-ui 4.0.1 → 4.2.0

package/dist/components/skelton/Skelton.stories.tsx

@@ -1,74 +1,38 @@
 import React from "react"
-import { Badge } from "@components/badge"
-import { Button } from "@components/button"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import { Skeleton } from "."
 
 const meta: Meta<typeof Skeleton> = {
   title: "Components/UI/Skeleton",
   component: Skeleton,
   parameters: {
-    layout: "fullscreen",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
-    },
+    layout: "centered",
     docs: {
       description: {
-        component: `
-# Skeleton Component
-
-A loading placeholder component that displays animated shimmer effects while content is being loaded. It helps improve perceived performance by showing users that content is loading.
-
-## Features
-
-- **Animated Pulse**: Smooth pulse animation for loading states
-- **Flexible Sizing**: Easily customizable with Tailwind classes
-- **Accessible**: Uses proper ARIA attributes for screen readers
-- **Lightweight**: Simple, performant implementation
-- **Customizable**: Override styles with className prop
-- **Rounded Corners**: Default rounded styling that can be customized
-
-## Usage Examples
-
-### Basic Skeleton
-\`\`\`tsx
-<Skeleton className="h-4 w-full" />
-\`\`\`
-
-### Text Lines
-\`\`\`tsx
-<div className="space-y-2">
-  <Skeleton className="h-4 w-full" />
-  <Skeleton className="h-4 w-3/4" />
-  <Skeleton className="h-4 w-1/2" />
-</div>
-\`\`\`
-
-### Avatar Skeleton
-\`\`\`tsx
-<Skeleton className="h-12 w-12 rounded-full" />
-\`\`\`
-
-### Card Skeleton
-\`\`\`tsx
-<div className="space-y-3">
-  <Skeleton className="h-48 w-full rounded-lg" />
-  <Skeleton className="h-4 w-2/3" />
-  <Skeleton className="h-4 w-1/2" />
-</div>
-\`\`\`
-
-### Button Skeleton
-\`\`\`tsx
-<Skeleton className="h-10 w-24 rounded-md" />
-\`\`\`
-        `,
+        component:
+          "A loading placeholder that renders an animated pulse in place of content that has not yet loaded. Accepts any className to control size and shape — compose multiple instances to mirror the real UI layout and reduce perceived load time.",
       },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "Animated Pulse",
+              description: "CSS shimmer effect",
+            },
+            {
+              title: "Any Shape",
+              description: "Size via className",
+            },
+            {
+              title: "Composable",
+              description: "Mirror real UI layout",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
@@ -77,176 +41,160 @@ A loading placeholder component that displays animated shimmer effects while con
 export default meta
 type Story = StoryObj<typeof Skeleton>
 
-// 1. Basic Skeleton Sizes
-export const BasicSizes: Story = {
-  render: () => (
-    <div className="space-y-8 p-8">
-      <div className="space-y-4">
-        <h3 className="text-lg font-medium text-white">Basic Skeleton Sizes</h3>
+// ─── 1. Configurations ────────────────────────────────────────────────────────
 
-        {/* Small elements */}
-        <div className="space-y-3">
-          <h4 className="text-sm font-medium text-white/70">Small Elements</h4>
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Badge:</span>
-              <Skeleton className="h-5 w-16" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Tag:</span>
-              <Skeleton className="h-6 w-20" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Icon:</span>
-              <Skeleton className="h-4 w-4" />
-            </div>
+export const Configurations: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Single line */}
+      <div>
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+          Single Line
+        </h4>
+        <div className="flex flex-wrap gap-4">
+          <div className="space-y-2 text-center">
+            <Skeleton className="bg-fm-surface-secondary h-4 w-48" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Body text
+            </p>
           </div>
-        </div>
-
-        {/* Text elements */}
-        <div className="space-y-3">
-          <h4 className="text-sm font-medium text-white/70">Text Elements</h4>
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Line:</span>
-              <Skeleton className="h-4 w-full" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Short:</span>
-              <Skeleton className="h-4 w-3/4" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Word:</span>
-              <Skeleton className="h-4 w-1/2" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Title:</span>
-              <Skeleton className="h-6 w-2/3" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Heading:</span>
-              <Skeleton className="h-8 w-1/2" />
-            </div>
+          <div className="space-y-2 text-center">
+            <Skeleton className="bg-fm-surface-secondary h-5 w-32" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Subtitle
+            </p>
           </div>
-        </div>
-
-        {/* Interactive elements */}
-        <div className="space-y-3">
-          <h4 className="text-sm font-medium text-white/70">
-            Interactive Elements
-          </h4>
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Button:</span>
-              <Skeleton className="h-10 w-24" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Input:</span>
-              <Skeleton className="h-10 w-64" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Select:</span>
-              <Skeleton className="h-10 w-48" />
-            </div>
+          <div className="space-y-2 text-center">
+            <Skeleton className="bg-fm-surface-secondary h-7 w-40" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Heading
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Skeleton className="bg-fm-surface-secondary h-4 w-16" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Metadata
+            </p>
           </div>
         </div>
+      </div>
 
-        {/* Shape variations */}
-        <div className="space-y-3">
-          <h4 className="text-sm font-medium text-white/70">
-            Shape Variations
-          </h4>
-          <div className="flex items-center gap-4">
-            <div className="text-center">
-              <Skeleton className="h-12 w-12 rounded-full" />
-              <p className="mt-1 text-xs text-white/60">Circle</p>
-            </div>
-            <div className="text-center">
-              <Skeleton className="h-12 w-12 rounded-none" />
-              <p className="mt-1 text-xs text-white/60">Square</p>
-            </div>
-            <div className="text-center">
-              <Skeleton className="h-12 w-16 rounded-lg" />
-              <p className="mt-1 text-xs text-white/60">Rounded</p>
-            </div>
-            <div className="text-center">
-              <Skeleton className="h-6 w-32 rounded-full" />
-              <p className="mt-1 text-xs text-white/60">Pill</p>
+      {/* Multi-line text block */}
+      <div>
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+          Multi-line Text
+        </h4>
+        <div className="flex flex-wrap gap-8">
+          <div className="space-y-2 text-center">
+            <div className="w-64 space-y-2">
+              <Skeleton className="bg-fm-surface-secondary h-4 w-full" />
+              <Skeleton className="bg-fm-surface-secondary h-4 w-full" />
+              <Skeleton className="bg-fm-surface-secondary h-4 w-3/4" />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Paragraph (3 lines)
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="w-64 space-y-2">
+              <Skeleton className="bg-fm-surface-secondary h-6 w-3/4" />
+              <Skeleton className="bg-fm-surface-secondary h-4 w-1/3" />
+              <div className="space-y-1.5 pt-1">
+                <Skeleton className="bg-fm-surface-secondary h-4 w-full" />
+                <Skeleton className="bg-fm-surface-secondary h-4 w-5/6" />
+                <Skeleton className="bg-fm-surface-secondary h-4 w-4/5" />
+              </div>
             </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Article (title + meta + body)
+            </p>
           </div>
         </div>
       </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Various skeleton sizes and shapes for different UI elements including text, buttons, inputs, and icons with different border radius options.",
-      },
-    },
-  },
-}
-
-// 2. Text Content Skeletons
-export const TextContentSkeletons: Story = {
-  render: () => (
-    <div className="space-y-8 p-8">
-      <h3 className="text-lg font-medium text-white">Text Content Skeletons</h3>
 
-      {/* Paragraph skeleton */}
-      <div className="space-y-4">
-        <h4 className="text-sm font-medium text-white/70">Paragraph</h4>
-        <div className="space-y-2">
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
+      {/* Avatar circle */}
+      <div>
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+          Avatar Circle
+        </h4>
+        <div className="flex flex-wrap items-end gap-6">
+          <div className="space-y-2 text-center">
+            <Skeleton className="bg-fm-surface-secondary h-8 w-8 rounded-full" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              XS (32px)
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Skeleton className="bg-fm-surface-secondary h-10 w-10 rounded-full" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              SM (40px)
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Skeleton className="bg-fm-surface-secondary h-12 w-12 rounded-full" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              MD (48px)
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Skeleton className="bg-fm-surface-secondary h-16 w-16 rounded-full" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              LG (64px)
+            </p>
+          </div>
         </div>
       </div>
 
-      {/* Article skeleton */}
-      <div className="space-y-4">
-        <h4 className="text-sm font-medium text-white/70">Article</h4>
-        <div className="space-y-3">
-          <Skeleton className="h-8 w-2/3" /> {/* Title */}
-          <Skeleton className="h-4 w-1/3" /> {/* Meta info */}
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-5/6" />
+      {/* Card layout */}
+      <div>
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+          Card Layout
+        </h4>
+        <div className="flex flex-wrap gap-6">
+          <div className="space-y-2 text-center">
+            <div className="w-48 space-y-3">
+              <Skeleton className="bg-fm-surface-secondary h-28 w-full rounded-lg" />
+              <Skeleton className="bg-fm-surface-secondary h-4 w-3/4" />
+              <Skeleton className="bg-fm-surface-secondary h-3 w-1/2" />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Media card
+            </p>
           </div>
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-4/5" />
+          <div className="space-y-2 text-center">
+            <div className="w-48 space-y-3">
+              <div className="flex items-center gap-2">
+                <Skeleton className="bg-fm-surface-secondary h-10 w-10 rounded-full" />
+                <div className="flex-1 space-y-1.5">
+                  <Skeleton className="bg-fm-surface-secondary h-3.5 w-full" />
+                  <Skeleton className="bg-fm-surface-secondary h-3 w-3/4" />
+                </div>
+              </div>
+              <Skeleton className="bg-fm-surface-secondary h-4 w-full" />
+              <Skeleton className="bg-fm-surface-secondary h-4 w-4/5" />
+              <Skeleton className="bg-fm-surface-secondary h-8 w-24 rounded-md" />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Profile card
+            </p>
           </div>
         </div>
       </div>
 
-      {/* List skeleton */}
-      <div className="space-y-4">
-        <h4 className="text-sm font-medium text-white/70">List Items</h4>
-        <div className="space-y-3">
+      {/* List item */}
+      <div>
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+          List Item
+        </h4>
+        <div className="w-72 space-y-2">
           {Array.from({ length: 4 }, (_, i) => (
             <div key={i} className="flex items-center gap-3">
-              <Skeleton className="h-2 w-2 rounded-full" />
-              <Skeleton className="h-4 flex-1" />
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Comments skeleton */}
-      <div className="space-y-4">
-        <h4 className="text-sm font-medium text-white/70">Comments</h4>
-        <div className="space-y-4">
-          {Array.from({ length: 3 }, (_, i) => (
-            <div key={i} className="flex gap-3">
-              <Skeleton className="h-8 w-8 rounded-full" />
-              <div className="flex-1 space-y-2">
-                <Skeleton className="h-3 w-24" />
-                <Skeleton className="h-4 w-full" />
-                <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="bg-fm-surface-secondary h-10 w-10 rounded-md" />
+              <div className="flex-1 space-y-1.5">
+                <Skeleton className="bg-fm-surface-secondary h-3.5 w-3/4" />
+                <Skeleton className="bg-fm-surface-secondary h-3 w-1/2" />
               </div>
+              <Skeleton className="bg-fm-surface-secondary h-3 w-8" />
             </div>
           ))}
         </div>
@@ -257,592 +205,110 @@ export const TextContentSkeletons: Story = {
     docs: {
       description: {
         story:
-          "Skeleton layouts for various text content including paragraphs, articles, lists, and comment sections.",
+          "All foundational skeleton shapes used across the audio app: single lines at various text sizes, multi-line text blocks, avatar circles in four sizes, media and profile card layouts, and a repeating list item row.",
       },
     },
   },
 }
 
-// 3. Card Layout Skeletons
-export const CardLayoutSkeletons: Story = {
-  render: () => (
-    <div className="space-y-8 p-8">
-      <h3 className="text-lg font-medium text-white">Card Layout Skeletons</h3>
+// ─── 2. UseCases ──────────────────────────────────────────────────────────────
 
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {/* Basic card */}
-        <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-          <div className="space-y-3">
-            <Skeleton className="h-32 w-full rounded-md" />
-            <Skeleton className="h-5 w-3/4" />
+export const UseCases: Story = {
+  render: () => (
+    <div className="mx-auto max-w-3xl space-y-8 p-8">
+      {/* Track card skeleton */}
+      <div>
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+          Track Card Skeleton
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary flex gap-4 rounded-xl border p-4">
+          <Skeleton className="bg-fm-surface-primary h-24 w-24 flex-none rounded-lg" />
+          <div className="flex flex-1 flex-col justify-between py-0.5">
             <div className="space-y-2">
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-2/3" />
+              <Skeleton className="bg-fm-surface-primary h-5 w-3/4" />
+              <Skeleton className="bg-fm-surface-primary h-4 w-1/2" />
+              <Skeleton className="bg-fm-surface-primary h-3.5 w-1/3" />
             </div>
-            <Skeleton className="h-9 w-20" />
-          </div>
-        </div>
-
-        {/* Profile card */}
-        <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-          <div className="space-y-4">
             <div className="flex items-center gap-3">
-              <Skeleton className="h-12 w-12 rounded-full" />
-              <div className="space-y-2">
-                <Skeleton className="h-4 w-24" />
-                <Skeleton className="h-3 w-16" />
-              </div>
-            </div>
-            <div className="space-y-2">
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-3/4" />
-            </div>
-            <div className="flex gap-2">
-              <Skeleton className="h-8 w-16" />
-              <Skeleton className="h-8 w-20" />
-            </div>
-          </div>
-        </div>
-
-        {/* Product card */}
-        <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-          <div className="space-y-3">
-            <Skeleton className="h-40 w-full rounded-md" />
-            <div className="space-y-2">
-              <Skeleton className="h-5 w-full" />
-              <div className="flex items-center justify-between">
-                <Skeleton className="h-6 w-16" />
-                <Skeleton className="h-4 w-12" />
-              </div>
-            </div>
-            <div className="flex gap-2">
-              <Skeleton className="h-9 flex-1" />
-              <Skeleton className="h-9 w-9" />
+              <Skeleton className="bg-fm-surface-primary h-8 w-8 rounded-full" />
+              <Skeleton className="bg-fm-surface-primary h-1.5 flex-1 rounded-full" />
+              <Skeleton className="bg-fm-surface-primary h-3.5 w-10" />
             </div>
           </div>
         </div>
+      </div>
 
-        {/* Stats card */}
-        <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <Skeleton className="h-5 w-24" />
-              <Skeleton className="h-6 w-6 rounded-md" />
-            </div>
-            <Skeleton className="h-8 w-16" />
-            <div className="space-y-2">
-              <div className="flex justify-between">
-                <Skeleton className="h-3 w-12" />
-                <Skeleton className="h-3 w-8" />
+      {/* Profile skeleton */}
+      <div>
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+          Artist Profile Skeleton
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-xl border">
+          {/* Hero banner */}
+          <Skeleton className="bg-fm-surface-primary h-32 w-full rounded-t-xl" />
+          {/* Profile info */}
+          <div className="space-y-4 p-5">
+            <div className="flex items-end gap-4">
+              <Skeleton className="bg-fm-surface-primary -mt-10 h-20 w-20 flex-none rounded-full" />
+              <div className="flex-1 space-y-2 pb-1">
+                <Skeleton className="bg-fm-surface-primary h-5 w-40" />
+                <Skeleton className="bg-fm-surface-primary h-3.5 w-24" />
               </div>
-              <Skeleton className="h-2 w-full rounded-full" />
+              <Skeleton className="bg-fm-surface-primary h-9 w-24 rounded-full" />
             </div>
-          </div>
-        </div>
-
-        {/* Media card */}
-        <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-          <div className="space-y-3">
-            <div className="flex items-center gap-3">
-              <Skeleton className="h-10 w-10 rounded-full" />
+            <Skeleton className="bg-fm-surface-primary h-4 w-full" />
+            <Skeleton className="bg-fm-surface-primary h-4 w-5/6" />
+            <div className="flex gap-6 pt-1">
               <div className="space-y-1">
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-3 w-16" />
+                <Skeleton className="bg-fm-surface-primary h-5 w-12" />
+                <Skeleton className="bg-fm-surface-primary h-3 w-16" />
               </div>
-            </div>
-            <Skeleton className="h-48 w-full rounded-md" />
-            <div className="space-y-2">
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-1/2" />
-            </div>
-            <div className="flex justify-between">
-              <div className="flex gap-2">
-                <Skeleton className="h-8 w-12" />
-                <Skeleton className="h-8 w-12" />
-              </div>
-              <Skeleton className="h-8 w-8" />
-            </div>
-          </div>
-        </div>
-
-        {/* Dashboard widget */}
-        <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <Skeleton className="h-5 w-32" />
-              <Skeleton className="h-6 w-16 rounded-full" />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
               <div className="space-y-1">
-                <Skeleton className="h-6 w-12" />
-                <Skeleton className="h-3 w-16" />
+                <Skeleton className="bg-fm-surface-primary h-5 w-10" />
+                <Skeleton className="bg-fm-surface-primary h-3 w-14" />
               </div>
               <div className="space-y-1">
-                <Skeleton className="h-6 w-16" />
-                <Skeleton className="h-3 w-12" />
+                <Skeleton className="bg-fm-surface-primary h-5 w-14" />
+                <Skeleton className="bg-fm-surface-primary h-3 w-16" />
               </div>
             </div>
-            <Skeleton className="h-24 w-full rounded-md" />
           </div>
         </div>
       </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Comprehensive card layout skeletons for different content types including basic cards, profiles, products, stats, media, and dashboard widgets.",
-      },
-    },
-  },
-}
-
-// 4. Table Skeleton
-export const TableSkeleton: Story = {
-  render: () => (
-    <div className="space-y-8 p-8">
-      <h3 className="text-lg font-medium text-white">Table Skeleton</h3>
-
-      <div className="space-y-4">
-        {/* Table header */}
-        <div className="grid grid-cols-4 gap-4 border-b border-white/10 pb-3">
-          <Skeleton className="h-4 w-16" />
-          <Skeleton className="h-4 w-20" />
-          <Skeleton className="h-4 w-12" />
-          <Skeleton className="h-4 w-14" />
-        </div>
 
-        {/* Table rows */}
-        {Array.from({ length: 6 }, (_, i) => (
-          <div key={i} className="grid grid-cols-4 gap-4 py-3">
-            <div className="flex items-center gap-2">
-              <Skeleton className="h-8 w-8 rounded-full" />
-              <Skeleton className="h-4 w-24" />
-            </div>
-            <Skeleton className="h-4 w-32" />
-            <Skeleton className="h-6 w-16 rounded-full" />
-            <div className="flex gap-1">
-              <Skeleton className="h-8 w-8" />
-              <Skeleton className="h-8 w-8" />
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Pagination skeleton */}
-      <div className="flex items-center justify-between border-t border-white/10 pt-4">
-        <Skeleton className="h-4 w-32" />
-        <div className="flex gap-1">
-          <Skeleton className="h-8 w-8" />
-          <Skeleton className="h-8 w-8" />
-          <Skeleton className="h-8 w-8" />
-          <Skeleton className="h-8 w-12" />
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Table skeleton with headers, rows containing avatars, text, badges, and action buttons, plus pagination controls.",
-      },
-    },
-  },
-}
-
-// 5. Form Skeleton
-export const FormSkeleton: Story = {
-  render: () => (
-    <div className="space-y-8 p-8">
-      <h3 className="text-lg font-medium text-white">Form Skeleton</h3>
-
-      <div className="mx-auto max-w-md space-y-6">
-        {/* Form header */}
-        <div className="space-y-2">
-          <Skeleton className="h-8 w-48" />
-          <Skeleton className="h-4 w-full" />
-        </div>
-
-        {/* Form fields */}
-        <div className="space-y-4">
-          {/* Text input */}
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-16" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-
-          {/* Email input */}
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-12" />
-            <Skeleton className="h-10 w-full" />
+      {/* Feed skeleton */}
+      <div>
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md mb-4 font-medium">
+          Discover Feed Skeleton
+        </h4>
+        <div className="space-y-3">
+          {/* Featured row — large cards */}
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+            {Array.from({ length: 3 }, (_, i) => (
+              <div key={i} className="space-y-2">
+                <Skeleton className="bg-fm-surface-secondary aspect-square w-full rounded-xl" />
+                <Skeleton className="bg-fm-surface-secondary h-4 w-3/4" />
+                <Skeleton className="bg-fm-surface-secondary h-3.5 w-1/2" />
+              </div>
+            ))}
           </div>
-
-          {/* Select */}
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="h-10 w-full" />
+          {/* Section header */}
+          <div className="flex items-center justify-between pt-2">
+            <Skeleton className="bg-fm-surface-secondary h-5 w-32" />
+            <Skeleton className="bg-fm-surface-secondary h-4 w-16" />
           </div>
-
-          {/* Textarea */}
+          {/* List rows */}
           <div className="space-y-2">
-            <Skeleton className="h-4 w-18" />
-            <Skeleton className="h-24 w-full" />
-          </div>
-
-          {/* Checkbox group */}
-          <div className="space-y-3">
-            <Skeleton className="h-4 w-24" />
-            <div className="space-y-2">
-              {Array.from({ length: 3 }, (_, i) => (
-                <div key={i} className="flex items-center gap-2">
-                  <Skeleton className="h-4 w-4" />
-                  <Skeleton className="h-4 w-32" />
+            {Array.from({ length: 4 }, (_, i) => (
+              <div key={i} className="flex items-center gap-3">
+                <Skeleton className="bg-fm-surface-secondary h-12 w-12 flex-none rounded-lg" />
+                <div className="flex-1 space-y-1.5">
+                  <Skeleton className="bg-fm-surface-secondary h-4 w-2/3" />
+                  <Skeleton className="bg-fm-surface-secondary h-3 w-2/5" />
                 </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Radio group */}
-          <div className="space-y-3">
-            <Skeleton className="h-4 w-20" />
-            <div className="space-y-2">
-              {Array.from({ length: 2 }, (_, i) => (
-                <div key={i} className="flex items-center gap-2">
-                  <Skeleton className="h-4 w-4 rounded-full" />
-                  <Skeleton className="h-4 w-28" />
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Form actions */}
-        <div className="flex gap-3 pt-4">
-          <Skeleton className="h-10 flex-1" />
-          <Skeleton className="h-10 w-20" />
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Complete form skeleton with various input types including text fields, selects, textareas, checkboxes, radio buttons, and action buttons.",
-      },
-    },
-  },
-}
-
-// 6. Loading States Simulation
-export const LoadingStatesSimulation: Story = {
-  render: () => {
-    const [loadingStates, setLoadingStates] = React.useState({
-      profile: true,
-      content: true,
-      cards: true,
-      table: true,
-    })
-
-    React.useEffect(() => {
-      // Simulate different loading times
-      const timers = [
-        setTimeout(
-          () => setLoadingStates((prev) => ({ ...prev, profile: false })),
-          1000
-        ),
-        setTimeout(
-          () => setLoadingStates((prev) => ({ ...prev, content: false })),
-          2000
-        ),
-        setTimeout(
-          () => setLoadingStates((prev) => ({ ...prev, cards: false })),
-          3000
-        ),
-        setTimeout(
-          () => setLoadingStates((prev) => ({ ...prev, table: false })),
-          4000
-        ),
-      ]
-
-      return () => timers.forEach(clearTimeout)
-    }, [])
-
-    const resetLoadingStates = () => {
-      setLoadingStates({
-        profile: true,
-        content: true,
-        cards: true,
-        table: true,
-      })
-    }
-
-    return (
-      <div className="space-y-8 p-8">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-medium text-white">
-            Loading States Simulation
-          </h3>
-          <Button onClick={resetLoadingStates} size="sm">
-            Reset Loading
-          </Button>
-        </div>
-
-        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-          {/* Profile section */}
-          <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
-              Profile Section
-            </h4>
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-              {loadingStates.profile ? (
-                <div className="flex items-center gap-4">
-                  <Skeleton className="h-16 w-16 rounded-full" />
-                  <div className="space-y-2">
-                    <Skeleton className="h-6 w-32" />
-                    <Skeleton className="h-4 w-24" />
-                    <Skeleton className="h-4 w-40" />
-                  </div>
-                </div>
-              ) : (
-                <div className="flex items-center gap-4">
-                  <div className="h-16 w-16 rounded-full bg-gradient-to-r from-blue-500 to-purple-500" />
-                  <div>
-                    <h3 className="text-lg font-medium text-white">John Doe</h3>
-                    <p className="text-sm text-white/60">Software Engineer</p>
-                    <p className="text-sm text-white/80">
-                      Building amazing user experiences
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Content section */}
-          <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
-              Content Section
-            </h4>
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-              {loadingStates.content ? (
-                <div className="space-y-3">
-                  <Skeleton className="h-6 w-3/4" />
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-full" />
-                    <Skeleton className="h-4 w-full" />
-                    <Skeleton className="h-4 w-2/3" />
-                  </div>
-                </div>
-              ) : (
-                <div className="space-y-3">
-                  <h3 className="text-lg font-medium text-white">
-                    Article Title
-                  </h3>
-                  <p className="text-sm text-white/80">
-                    This is the actual content that was loading. It demonstrates
-                    how the skeleton transforms into real content seamlessly.
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Cards section */}
-          <div className="space-y-4 lg:col-span-2">
-            <h4 className="text-sm font-medium text-white/70">Cards Grid</h4>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-              {Array.from({ length: 3 }, (_, i) => (
-                <div
-                  key={i}
-                  className="rounded-lg border border-white/10 bg-white/5 p-4"
-                >
-                  {loadingStates.cards ? (
-                    <div className="space-y-3">
-                      <Skeleton className="h-24 w-full rounded-md" />
-                      <Skeleton className="h-5 w-3/4" />
-                      <Skeleton className="h-4 w-1/2" />
-                      <Skeleton className="h-9 w-20" />
-                    </div>
-                  ) : (
-                    <div className="space-y-3">
-                      <div className="h-24 w-full rounded-md bg-gradient-to-r from-green-400 to-blue-500" />
-                      <h3 className="font-medium text-white">Card {i + 1}</h3>
-                      <p className="text-sm text-white/60">Description text</p>
-                      <Badge color="neutral">Active</Badge>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Table section */}
-          <div className="space-y-4 lg:col-span-2">
-            <h4 className="text-sm font-medium text-white/70">Data Table</h4>
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-              {loadingStates.table ? (
-                <div className="space-y-3">
-                  <div className="grid grid-cols-3 gap-4">
-                    <Skeleton className="h-4 w-16" />
-                    <Skeleton className="h-4 w-20" />
-                    <Skeleton className="h-4 w-12" />
-                  </div>
-                  {Array.from({ length: 3 }, (_, i) => (
-                    <div key={i} className="grid grid-cols-3 gap-4">
-                      <Skeleton className="h-4 w-24" />
-                      <Skeleton className="h-4 w-32" />
-                      <Skeleton className="h-4 w-16" />
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="space-y-3">
-                  <div className="grid grid-cols-3 gap-4 font-medium text-white">
-                    <div>Name</div>
-                    <div>Email</div>
-                    <div>Status</div>
-                  </div>
-                  {[
-                    {
-                      name: "Alice Johnson",
-                      email: "alice@example.com",
-                      status: "Active",
-                    },
-                    {
-                      name: "Bob Smith",
-                      email: "bob@example.com",
-                      status: "Inactive",
-                    },
-                    {
-                      name: "Carol Williams",
-                      email: "carol@example.com",
-                      status: "Active",
-                    },
-                  ].map((row, i) => (
-                    <div
-                      key={i}
-                      className="grid grid-cols-3 gap-4 text-white/80"
-                    >
-                      <div>{row.name}</div>
-                      <div>{row.email}</div>
-                      <div>
-                        <Badge
-                          color={
-                            row.status === "Active" ? "positive" : "neutral"
-                          }
-                        >
-                          {row.status}
-                        </Badge>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Interactive demonstration of loading states with timed transitions from skeleton to real content, showing how skeletons improve perceived performance.",
-      },
-    },
-  },
-}
-
-// 7. Custom Styling
-export const CustomStyling: Story = {
-  render: () => (
-    <div className="space-y-8 p-8">
-      <h3 className="text-lg font-medium text-white">
-        Custom Styling Examples
-      </h3>
-
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-        {/* Different colors */}
-        <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
-            Color Variations
-          </h4>
-          <div className="space-y-3">
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Default:</span>
-              <Skeleton className="h-4 flex-1" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Blue:</span>
-              <Skeleton className="h-4 flex-1 bg-blue-500/20" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Green:</span>
-              <Skeleton className="h-4 flex-1 bg-green-500/20" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Purple:</span>
-              <Skeleton className="h-4 flex-1 bg-purple-500/20" />
-            </div>
-          </div>
-        </div>
-
-        {/* Different animations */}
-        <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
-            Animation Variations
-          </h4>
-          <div className="space-y-3">
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Pulse:</span>
-              <Skeleton className="h-4 flex-1" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Bounce:</span>
-              <Skeleton className="h-4 flex-1 animate-bounce" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">Ping:</span>
-              <Skeleton className="h-4 flex-1 animate-ping" />
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="w-16 text-xs text-white/60">None:</span>
-              <Skeleton className="h-4 flex-1 animate-none" />
-            </div>
-          </div>
-        </div>
-
-        {/* Complex layouts */}
-        <div className="space-y-4 md:col-span-2">
-          <h4 className="text-sm font-medium text-white/70">Complex Layout</h4>
-          <div className="grid grid-cols-12 gap-4">
-            <div className="col-span-2">
-              <Skeleton className="h-12 w-full rounded-full" />
-            </div>
-            <div className="col-span-8 space-y-2">
-              <Skeleton className="h-3 w-full" />
-              <Skeleton className="h-3 w-3/4" />
-              <Skeleton className="h-3 w-1/2" />
-            </div>
-            <div className="col-span-2">
-              <Skeleton className="h-12 w-full" />
-            </div>
-          </div>
-        </div>
-
-        {/* Gradient skeletons */}
-        <div className="space-y-4 md:col-span-2">
-          <h4 className="text-sm font-medium text-white/70">
-            Gradient Backgrounds
-          </h4>
-          <div className="space-y-3">
-            <Skeleton className="h-4 w-full bg-gradient-to-r from-blue-500/20 to-purple-500/20" />
-            <Skeleton className="h-4 w-3/4 bg-gradient-to-r from-green-500/20 to-blue-500/20" />
-            <Skeleton className="h-4 w-1/2 bg-gradient-to-r from-pink-500/20 to-yellow-500/20" />
+                <Skeleton className="bg-fm-surface-secondary h-7 w-7 rounded-full" />
+              </div>
+            ))}
           </div>
         </div>
       </div>
@@ -852,7 +318,7 @@ export const CustomStyling: Story = {
     docs: {
       description: {
         story:
-          "Custom styling options for skeleton components including different colors, animations, gradient backgrounds, and complex layouts.",
+          "Full skeleton screens for three core audio app surfaces: a now-playing track card with progress bar, an artist profile page with hero banner and stats, and a discover feed combining an album grid with a list section.",
       },
     },
   },