aural-ui 4.0.1 → 4.2.0

package/dist/icons/git-branch-icon/GitBranchIcon.stories.tsx

@@ -1,6 +1,20 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { GitForkIcon } from "src/ui/icons/git-fork-icon"
+import { ImportFolderIcon } from "src/ui/icons/import-folder-icon"
+import { SettingIcon } from "src/ui/icons/setting-icon"
+import { ShareIcon } from "src/ui/icons/share-icon"
+import {
+  IconColorVariations,
+  IconDefaultCanvas,
+  IconPlaygroundCanvas,
+  IconSizeVariations,
+  IconUsageCanvas,
+  IconUsageSection,
+} from "src/ui/story-spec/icons/icon-story-canvas"
+import { AuralIconDocsPage } from "src/ui/story-spec/icons/icon-story-docs-page"
+
 import { GitBranchIcon } from "."
 
 const meta: Meta<typeof GitBranchIcon> = {
@@ -18,983 +32,72 @@ const meta: Meta<typeof GitBranchIcon> = {
     },
     docs: {
       page: () => (
-        <>
-          {/* Override default docs styling */}
-          <style>
-            {`
-              .sbdocs-wrapper {
-                padding: 0 ;
-                max-width: none ;
-                background: transparent ;
-              }
-              .sbdocs-content {
-                max-width: none ;
-                padding: 0 ;
-                margin: 0 ;
-                background: transparent ;
-              }
-              .docs-story {
-                background: transparent ;
-              }
-              .sbdocs {
-                background: transparent ;
-              }
-              body {
-                background: var(--color-fm-surface-primary) ;
-              }
-              #storybook-docs {
-                background: var(--color-fm-surface-primary) ;
-              }
-              .sbdocs-preview {
-                background: transparent ;
-                border: none ;
-              }
-              .sbdocs-h1, .sbdocs-h2, .sbdocs-h3, .sbdocs-h4, .sbdocs-h5, .sbdocs-h6 {
-                color: var(--color-fm-icon-active) ;
-              }
-              .sbdocs-p, .sbdocs-li {
-                color: var(--color-fm-secondary) ;
-              }
-              .sbdocs-code {
-                background: var(--color-fm-surface-secondary) ;
-                color: var(--color-fm-secondary-500) ;
-                border: 1px solid var(--color-fm-divider-secondary) ;
-              }
-              .sbdocs-pre {
-                background: var(--color-fm-surface-secondary) ;
-                border: 1px solid var(--color-fm-divider-secondary) ;
-              }
-              .sbdocs-table {
-                background: var(--color-fm-surface-secondary) ;
-                border: 1px solid var(--color-fm-divider-secondary) ;
-              }
-              .sbdocs-table th {
-                background: var(--color-fm-surface-secondary) ;
-                color: var(--color-fm-icon-active) ;
-                border-bottom: 1px solid var(--color-fm-divider-secondary) ;
-              }
-              .sbdocs-table td {
-                color: var(--color-fm-secondary) ;
-                border-bottom: 1px solid var(--color-fm-divider-tertiary) ;
-              }
-              @keyframes search-pulse {
-                0%, 100% { transform: scale(1); opacity: 1; }
-                50% { transform: scale(1.05); opacity: 0.8; }
-              }
-              .animate-search-pulse {
-                animation: search-pulse 2s ease-in-out infinite;
-              }
-              @keyframes document-slide {
-                0%, 100% { transform: translateX(0) rotate(0deg); }
-                50% { transform: translateX(-2px) rotate(-1deg); }
-              }
-              .animate-document-slide {
-                animation: document-slide 3s ease-in-out infinite;
-              }
-            `}
-          </style>
-
-          <div className="from-fm-surface-primary via-fm-icon-info/5 to-fm-surface-primary min-h-screen bg-linear-to-br">
-            {/* Header */}
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary relative overflow-hidden border-b backdrop-blur-xl">
-              <div className="from-fm-icon-info/10 to-fm-icon-info/10 absolute inset-0 bg-linear-to-r via-transparent" />
-              <div className="relative !mx-auto max-w-7xl px-6 py-16">
-                <div className="!space-y-6 text-center">
-                  <div className="border-fm-icon-info/30 from-fm-icon-info/20 to-fm-icon-info/20 !mx-auto flex h-24 w-24 items-center justify-center rounded-2xl border bg-linear-to-br">
-                    <GitBranchIcon className="text-fm-icon-info h-12 w-12" />
-                  </div>
-                  <h1 className="!text-fm-primary text-5xl font-bold">
-                    GitBranchIcon
-                  </h1>
-                  <p className="text-fm-secondary! !mx-auto max-w-3xl text-xl leading-relaxed">
-                    A Git branch icon symbolizing version control, branching,
-                    and collaborative development. Ideal for use in features
-                    like commit histories, branch selectors, repositories, or
-                    code collaboration dashboards. Built with accessibility in
-                    mind using Radix UI's AccessibleIcon wrapper.
-                  </p>
-
-                  {/* Stats */}
-                  <div className="flex items-center justify-center gap-8 pt-8">
-                    <div className="text-center">
-                      <div className="text-fm-icon-info text-3xl font-bold">
-                        Branch
-                      </div>
-                      <div className="text-fm-tertiary text-sm">
-                        Create features
-                      </div>
-                    </div>
-                    <div className="bg-fm-divider-primary h-8 w-px" />
-                    <div className="text-center">
-                      <div className="text-fm-icon-info text-3xl font-bold">
-                        Merge
-                      </div>
-                      <div className="text-fm-tertiary text-sm">
-                        Combine code
-                      </div>
-                    </div>
-                    <div className="bg-fm-divider-primary h-8 w-px" />
-                    <div className="text-center">
-                      <div className="text-fm-icon-info text-3xl font-bold">
-                        Deploy
-                      </div>
-                      <div className="text-fm-tertiary text-sm">
-                        Ship changes
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Content */}
-            <div className="!mx-auto max-w-7xl !space-y-16 px-6 py-12">
-              {/* Quick Usage */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Quick Start
-                </h2>
-                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-                  {/* Basic Usage */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-xl font-semibold">
-                      Basic Usage
-                    </h3>
-                    <div className="bg-fm-surface-secondary rounded-lg p-4">
-                      <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                        {`import { GitBranchIcon } from "@icons/git-branch-icon"
-
-function BranchButton() {
+        <AuralIconDocsPage
+          accentToken="info"
+          features={[
+            { title: "Version Control", description: "Git branch indicator" },
+            { title: "Dev Tooling", description: "Pipeline and workflow cue" },
+            { title: "Accessible", description: "ARIA-ready by default" },
+          ]}
+          quickStart={{
+            codeExample: `import { GitBranchIcon } from "src/ui/icons/git-branch-icon"
+
+function BranchLabel() {
   return (
-    <button
-      aria-label="Git branch icon"
-      className="flex items-center gap-2 rounded border border-indigo-500/30 bg-indigo-500/10 px-4 py-2 text-indigo-300 hover:bg-indigo-500/20 hover:cursor-pointer"
-    >
-      <GitBranchIcon className="h-4 w-4" />
-      Branches
-    </button>
-  )
-}ƒ`}
-                      </pre>
-                    </div>
-                  </div>
-
-                  {/* Live Preview */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-xl font-semibold">
-                      Live Preview
-                    </h3>
-                    <div className="border-fm-divider-secondary bg-fm-surface-secondary flex h-32 items-center justify-center rounded-lg border">
-                      <button className="border-fm-icon-info/30 bg-fm-icon-info/10 text-fm-icon-info hover:bg-fm-icon-info/20 flex items-center gap-2 rounded border px-4 py-2 hover:cursor-pointer">
-                        <GitBranchIcon className="h-4 w-4" />
-                        Branches
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Props Documentation */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Props & Configuration
-                </h2>
-
-                <div className="border-fm-divider-secondary bg-fm-surface-secondary overflow-hidden rounded-lg border">
-                  <div className="bg-fm-surface-secondary p-4">
-                    <h3 className="text-fm-icon-active! text-xl font-semibold">
-                      Props
-                    </h3>
-                  </div>
-                  <table className="!my-0 w-full">
-                    <thead className="bg-fm-surface-secondary">
-                      <tr className="border-fm-divider-secondary border-b">
-                        <th className="text-fm-icon-active! px-6 py-4 text-left text-sm font-semibold">
-                          Prop
-                        </th>
-                        <th className="text-fm-icon-active! px-6 py-4 text-left text-sm font-semibold">
-                          Type
-                        </th>
-                        <th className="text-fm-icon-active! px-6 py-4 text-left text-sm font-semibold">
-                          Default
-                        </th>
-                        <th className="text-fm-icon-active! px-6 py-4 text-left text-sm font-semibold">
-                          Description
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {" "}
-                      <tr className="bg-fm-surface-secondary!">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          withAccessibility
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          boolean
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          true
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          Whether to wrap the icon with accessibility feature
-                        </td>
-                      </tr>
-                      <tr className="border-fm-divider-tertiary bg-fm-surface-secondary! border-b">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          height
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          number | string
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          24
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          Height of the icon in pixels
-                        </td>
-                      </tr>
-                      <tr className="border-fm-divider-tertiary border-b">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          stroke
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          string
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          currentColor
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          Stroke color of the icon lines
-                        </td>
-                      </tr>
-                      <tr className="border-fm-divider-tertiary bg-fm-surface-secondary! border-b">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          strokeWidth
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          number | string
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          1.5
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          Thickness of the stroke lines
-                        </td>
-                      </tr>
-                      <tr className="border-fm-divider-tertiary border-b">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          strokeLinecap
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          string
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          square
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          Style of line endings (e.g., butt, round, square)
-                        </td>
-                      </tr>
-                      <tr className="border-fm-divider-tertiary bg-fm-surface-secondary! border-b">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          className
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          string
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          -
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          CSS classes for styling (use for size, color, etc.)
-                        </td>
-                      </tr>
-                      <tr className="bg-fm-surface-secondary!">
-                        <td className="text-fm-icon-info! px-6 py-4 font-mono text-sm">
-                          ...svgProps
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          SVGProps
-                        </td>
-                        <td className="text-fm-placeholder! px-6 py-4 text-sm">
-                          -
-                        </td>
-                        <td className="text-fm-secondary! px-6 py-4 text-sm">
-                          All standard SVG element props supported by React
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-
-              {/* Size Variations */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Size Variations
-                </h2>
-                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
-                  <div className="!space-y-6">
-                    <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-                      <div className="!space-y-4">
-                        <h3 className="text-fm-icon-info! text-lg font-semibold">
-                          Standard Sizes
-                        </h3>
-                        <div className="bg-fm-surface-secondary flex items-end gap-6 rounded-lg p-6">
-                          <div className="text-center">
-                            <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-3 w-3" />
-                            <span className="text-fm-tertiary text-xs">
-                              12px
-                            </span>
-                          </div>
-                          <div className="text-center">
-                            <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-4 w-4" />
-                            <span className="text-fm-tertiary text-xs">
-                              16px
-                            </span>
-                          </div>
-                          <div className="text-center">
-                            <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-5 w-5" />
-                            <span className="text-fm-tertiary text-xs">
-                              20px
-                            </span>
-                          </div>
-                          <div className="text-center">
-                            <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-6 w-6" />
-                            <span className="text-fm-tertiary text-xs">
-                              24px
-                            </span>
-                          </div>
-                          <div className="text-center">
-                            <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-8 w-8" />
-                            <span className="text-fm-tertiary text-xs">
-                              32px
-                            </span>
-                          </div>
-                          <div className="text-center">
-                            <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-12 w-12" />
-                            <span className="text-fm-tertiary text-xs">
-                              48px
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="!space-y-4">
-                        <h3 className="text-fm-icon-info! text-lg font-semibold">
-                          Code Example
-                        </h3>
-                        <div className="bg-fm-surface-secondary rounded-lg p-4">
-                          <pre className="text-fm-icon-info! overflow-x-auto text-sm">
-                            {`// Small (16px)
-<GitBranchIcon className="h-4 w-4 " />
-
-// Medium (24px)
-<GitBranchIcon className="h-6 w-6 " />
-
-// Large (32px)
-<GitBranchIcon className="h-8 w-8 " />
-
-// Custom size with props
-<GitBranchIcon width={40} height={40} />`}
-                          </pre>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Color Variations */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Color Variations
-                </h2>
-
-                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-                  {/* Semantic Colors */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Semantic Colors
-                    </h3>
-                    <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-4 rounded-lg border p-6">
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="text-fm-icon-info h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Primary
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-info
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="text-fm-icon-info h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Active
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-info
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="text-fm-placeholder h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Disabled
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-placeholder
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="text-fm-icon-info h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Info
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-info
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="text-fm-icon-positive h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Success
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-positive
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="text-fm-icon-warning h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Warning
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-warning
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="text-fm-icon-negative h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Error
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            text-fm-icon-negative
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Custom Colors */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Custom Colors
-                    </h3>
-                    <div className="bg-fm-surface-secondary rounded-lg p-4">
-                      <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                        {`// Using Tailwind classes
-<GitBranchIcon className="h-6 w-6 text-indigo-400" />
-<GitBranchIcon className="h-6 w-6 text-cyan-500" />
-
-// Using CSS custom properties
-<GitBranchIcon 
-  className="h-6 w-6" 
-  style={{ color: 'var(--color-primary)' }} 
-/>
-
-// Direct stroke prop
-<GitBranchIcon 
-  width={24} 
-  height={24} 
-  stroke="#3b82f6"
-/>`}
-                      </pre>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Usage Examples */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Usage Examples
-                </h2>
-
-                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-                  {/* Branch Creation Button */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Create New Branch
-                    </h3>
-                    <div className="!space-y-4">
-                      <div>
-                        <button className="border-fm-icon-info/30 bg-fm-icon-info/10 text-fm-icon-info hover:bg-fm-icon-info/20 flex items-center gap-2 rounded-lg border px-4 py-2 transition-colors hover:cursor-pointer">
-                          <GitBranchIcon className="h-4 w-4" />
-                          Create Branch
-                        </button>
-                      </div>
-                      <div className="bg-fm-surface-secondary rounded-lg p-4">
-                        <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                          {`<button className="flex items-center gap-2 bg-indigo-500/10 border border-indigo-500/30 px-4 py-2 rounded-lg">
-  <GitBranch className="h-4 w-4" />
-  Create Branch
-</button>`}
-                        </pre>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Branch Status Row */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Branch Status Display
-                    </h3>
-                    <div className="!space-y-4">
-                      <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
-                        <div className="flex items-center gap-3">
-                          <GitBranchIcon className="text-fm-icon-info h-5 w-5" />
-                          <div className="flex-1">
-                            <div className="text-fm-icon-active text-sm font-medium">
-                              Current branch:{" "}
-                              <span className="text-fm-icon-info">
-                                feature/user-auth
-                              </span>
-                            </div>
-                            <div className="text-fm-tertiary text-xs">
-                              3 commits ahead of main
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="bg-fm-surface-secondary rounded-lg p-4">
-                        <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                          {`<div className="flex items-center gap-3 p-4 border border-white/10 bg-white/5">
-  <GitBranch className="h-5 w-5 text-indigo-400" />
-  <div className="flex-1">
-    <div className="text-sm font-medium text-white">
-      Current branch: feature/user-auth
+    <div className="flex items-center gap-2">
+      <GitBranchIcon className="h-4 w-4 text-fm-icon-active" />
+      <span>main</span>
     </div>
-    <div className="text-xs text-white/60">3 commits ahead of main</div>
-  </div>
-</div>`}
-                        </pre>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* No Branches State */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      No Branches Available
-                    </h3>
-                    <div className="!space-y-4">
-                      <div className="border-fm-divider-secondary bg-fm-surface-secondary flex flex-col items-center justify-center rounded-lg border p-8">
-                        <GitBranchIcon className="text-fm-icon-active/30 mb-4 h-12 w-12" />
-                        <h4 className="text-fm-icon-active!/80 mb-2 text-lg font-medium">
-                          No feature branches found
-                        </h4>
-                        <p className="text-fm-placeholder! text-center text-sm">
-                          Create your first branch to start working on new
-                          features or bug fixes.
-                        </p>
-                        <button className="border-fm-icon-info/30 bg-fm-icon-info/20 text-fm-icon-info hover:bg-fm-icon-info/30 mt-4 flex items-center gap-2 rounded-lg border px-4 py-2 text-sm transition-colors hover:cursor-pointer">
-                          <GitBranchIcon className="h-4 w-4" />
-                          Create First Branch
-                        </button>
-                      </div>
-                      <div className="bg-fm-surface-secondary rounded-lg p-4">
-                        <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                          {`<div className="flex flex-col items-center p-8 border border-white/10 bg-white/5">
-  <GitBranch className="h-12 w-12 text-white/30 mb-4" />
-  <h4 className="text-lg font-medium text-white/80 mb-2">
-    No feature branches found
-  </h4>
-  <p className="text-sm text-white/50 text-center">
-    Create your first branch to start working on new features or bug fixes.
-  </p>
-  <button className="mt-4 flex items-center gap-2 text-sm">
-    <GitBranch className="h-4 w-4" />
-    Create First Branch
-  </button>
-</div>`}
-                        </pre>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Branch Merge Request */}
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Merge Request Status
-                    </h3>
-                    <div className="!space-y-4">
-                      <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
-                        <div className="flex items-center gap-3">
-                          <GitBranchIcon className="text-fm-icon-info h-5 w-5" />
-                          <div className="flex-1">
-                            <div className="text-fm-icon-active text-sm font-medium">
-                              Ready to merge:{" "}
-                              <span className="text-fm-icon-info">
-                                feature/payment-gateway
-                              </span>
-                            </div>
-                            <div className="text-fm-tertiary text-xs">
-                              All checks passed • 2 approvals
-                            </div>
-                          </div>
-                          <button className="border-fm-icon-positive/30 bg-fm-icon-positive/10 text-fm-icon-positive hover:bg-fm-icon-positive/20 rounded-lg border px-3 py-1 text-xs hover:cursor-pointer">
-                            Merge
-                          </button>
-                        </div>
-                      </div>
-                      <div className="bg-fm-surface-secondary rounded-lg p-4">
-                        <pre className="text-fm-icon-positive! overflow-x-auto text-sm">
-                          {`<div className="flex items-center gap-3 p-4 border border-white/10 bg-white/5">
-  <GitBranch className="h-5 w-5 text-indigo-400" />
-  <div className="flex-1">
-    <div className="text-sm font-medium text-white">
-      Ready to merge: feature/payment-gateway
-    </div>
-    <div className="text-xs text-white/60">All checks passed • 2 approvals</div>
-  </div>
-  <button className="px-3 py-1 text-xs bg-green-500/10 border border-green-500/30">
-    Merge
-  </button>
-</div>`}
-                        </pre>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Interactive States */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Interactive States & Animations
-                </h2>
-                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      Hover & Animation Effects
-                    </h3>
-                    <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-4 rounded-lg border p-6">
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="text-fm-tertiary hover:text-fm-icon-info h-6 w-6 transition-colors" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Color Change
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            Hover to see effect
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="text-fm-icon-active h-6 w-6 transition-transform hover:scale-110" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Scale Up
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            Scale on hover
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="animate-search-pulse text-fm-icon-info h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Search Pulse
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            Continuous animation
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4">
-                        <GitBranchIcon className="animate-document-slide text-fm-icon-info h-6 w-6" />
-                        <div>
-                          <div className="text-fm-icon-active text-sm font-medium">
-                            Document Slide
-                          </div>
-                          <div className="text-fm-tertiary text-xs">
-                            Subtle movement
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="!space-y-4">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      State Examples
-                    </h3>
-                    <div className="bg-fm-surface-secondary rounded-lg p-4">
-                      <pre className="text-fm-icon-info! overflow-x-auto text-sm">
-                        {`// Color change on hover
-<GitBranchIcon className="h-6 w-6 text-white/60 transition-colors hover:text-indigo-400 " />
-
-// Scale up on hover
-<GitBranchIcon className="h-6 w-6 text-white transition-transform hover:scale-110 " />
-
-// Loading/searching state
-<GitBranchIcon className="h-6 w-6 animate-pulse text-indigo-400 " />
-
-// Active search state
-<GitBranchIcon className="h-6 w-6 text-cyan-400 animate-search-pulse " />
-
-// Disabled state
-<GitBranchIcon className="h-6 w-6 text-gray-400 opacity-50 " />`}
-                      </pre>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Accessibility */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Accessibility Features
-                </h2>
-
-                <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-4 rounded-lg border p-6">
-                    <h3 className="text-fm-icon-positive! text-lg font-semibold">
-                      ✅ Built-in Features
-                    </h3>
-                    <ul className="text-fm-secondary! !space-y-2 text-sm">
-                      <li className="text-fm-secondary!">
-                        Uses Radix UI AccessibleIcon wrapper
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Provides screen reader label "Git branch icon"
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Maintains proper color contrast ratios
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Scales with user's font size preferences
-                      </li>
-                    </ul>
-                  </div>
-
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-4 rounded-lg border p-6">
-                    <h3 className="text-fm-icon-info! text-lg font-semibold">
-                      💡 Best Practices
-                    </h3>
-                    <ul className="text-fm-secondary !space-y-2 text-sm">
-                      <li className="text-fm-secondary!">
-                        Always provide descriptive labels for branch-related
-                        actions
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Use consistent placement in version control interfaces
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Ensure sufficient click/touch target sizes
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Add focus states for keyboard navigation
-                      </li>
-                      <li className="text-fm-secondary!">
-                        Consider motion sensitivity for branching animations
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-
-                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
-                  <h3 className="text-fm-secondary-600! mb-4 text-lg font-semibold">
-                    Custom Accessibility Implementation
-                  </h3>
-                  <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-                    {/* Code Example Block */}
-                    <div className="bg-fm-surface-secondary rounded-lg p-4">
-                      <pre className="text-fm-icon-info! overflow-x-auto text-sm">
-                        {`// Branch toggle button with ARIA
-<button 
-  aria-label="Toggle git branch panel"
-  aria-pressed={branchOpen}
-  className="flex items-center gap-2 p-2"
->
-  <GitBranchIcon className="h-4 w-4" />
-  <span className="sr-only">Open Branch Panel</span>
-</button>
-
-// Branch group with description
-<fieldset aria-labelledby="branch-heading" className="space-y-2">
-  <legend id="branch-heading" className="sr-only">Branch Options</legend>
-  <div>
-    <label className="inline-flex items-center gap-2">
-      <input type="checkbox" aria-describedby="branch-desc" />
-      Feature Branch
-    </label>
-  </div>
-  <div>
-    <label className="inline-flex items-center gap-2">
-      <input type="checkbox" />
-      Main Branch
-    </label>
-  </div>
-</fieldset>
-<p id="branch-desc" className="sr-only">
-  Choose one or more branches to compare or switch context.
-</p>`}
-                      </pre>
-                    </div>
-
-                    {/* Accessibility Note */}
-                    <div className="!space-y-4">
-                      <p className="text-fm-secondary! text-sm">
-                        When using <code>GitBranchIcon</code> for toggling or
-                        displaying branch-related panels, ensure ARIA labels
-                        clearly explain what will be shown or changed. Group
-                        options with semantic roles for screen reader clarity.
-                      </p>
-                      <div className="border-fm-icon-info/20 bg-fm-icon-info/10 rounded-lg border p-4">
-                        <div className="text-fm-icon-info flex items-center gap-2 text-sm">
-                          <GitBranchIcon className="h-4 w-4" />
-                          <span>
-                            Use <code>aria-pressed</code> or{" "}
-                            <code>aria-expanded</code> for toggles and{" "}
-                            <code>legend</code>/<code>fieldset</code> for
-                            grouped version control options.
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Related Icons */}
-              <div className="!space-y-8">
-                <h2 className="text-fm-icon-active! text-center text-3xl font-bold">
-                  Related Icons
-                </h2>
-                <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-3 rounded-lg border p-4 text-center">
-                    <div className="bg-fm-icon-info/20 !mx-auto flex h-12 w-12 items-center justify-center rounded-lg">
-                      <span className="text-2xl">🔍</span>
-                    </div>
-                    <div>
-                      <div className="text-fm-icon-active font-medium">
-                        SearchIcon
-                      </div>
-                      <div className="text-fm-tertiary text-xs">
-                        General search
-                      </div>
-                    </div>
-                  </div>
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-3 rounded-lg border p-4 text-center">
-                    <div className="bg-fm-secondary-500/20 !mx-auto flex h-12 w-12 items-center justify-center rounded-lg">
-                      <span className="text-2xl">📈</span>
-                    </div>
-                    <div>
-                      <div className="text-fm-icon-active font-medium">
-                        TrendingUpIcon
-                      </div>
-                      <div className="text-fm-tertiary text-xs">
-                        Growth metrics
-                      </div>
-                    </div>
-                  </div>
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-3 rounded-lg border p-4 text-center">
-                    <div className="bg-fm-icon-info/20 !mx-auto flex h-12 w-12 items-center justify-center rounded-lg">
-                      <span className="text-2xl">🗂️</span>
-                    </div>
-                    <div>
-                      <div className="text-fm-icon-active font-medium">
-                        FolderIcon
-                      </div>
-                      <div className="text-fm-tertiary text-xs">
-                        File browsing
-                      </div>
-                    </div>
-                  </div>
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary !space-y-3 rounded-lg border p-4 text-center">
-                    <div className="bg-fm-icon-positive/20 !mx-auto flex h-12 w-12 items-center justify-center rounded-lg">
-                      <span className="text-2xl">💾</span>
-                    </div>
-                    <div>
-                      <div className="text-fm-icon-active font-medium">
-                        SaveIcon
-                      </div>
-                      <div className="text-fm-tertiary text-xs">
-                        Save changes
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Footer */}
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary border-t backdrop-blur-xl">
-              <div className="!mx-auto max-w-7xl px-6 py-8">
-                <div className="!space-y-4 text-center">
-                  <p className="text-fm-tertiary!">
-                    FilterBarRowIcon is part of the Aural UI icon library, built
-                    for document search, content discovery, and page navigation
-                    functionality.
-                  </p>
-                  <p className="text-fm-placeholder! text-sm">
-                    All icons use Radix UI's AccessibleIcon for screen reader
-                    compatibility and follow WCAG guidelines for search
-                    interfaces.
-                  </p>
-                </div>
+  )
+}`,
+            livePreview: (
+              <div className="flex items-center gap-2">
+                <GitBranchIcon className="text-fm-icon-active h-5 w-5" />
+                <span className="text-fm-primary font-fm-text text-sm">
+                  main
+                </span>
               </div>
-            </div>
-          </div>
-        </>
+            ),
+          }}
+          relatedIcons={[
+            {
+              name: "GitForkIcon",
+              description: "Git fork indicator",
+              icon: GitForkIcon,
+              accentToken: "info",
+            },
+            {
+              name: "ShareIcon",
+              description: "Share content icon",
+              icon: ShareIcon,
+              accentToken: "positive",
+            },
+            {
+              name: "ImportFolderIcon",
+              description: "Import folder icon",
+              icon: ImportFolderIcon,
+              accentToken: "warning",
+            },
+            {
+              name: "SettingIcon",
+              description: "Settings / preferences icon",
+              icon: SettingIcon,
+              accentToken: "negative",
+            },
+          ]}
+        />
       ),
     },
   },
   tags: ["autodocs"],
   argTypes: {
-    width: {
-      control: { type: "range", min: 8, max: 96, step: 2 },
-      description: "Width of the icon in pixels",
+    className: {
+      control: "text",
+      description: "CSS classes including color token",
     },
     withAccessibility: {
       control: "boolean",
-      description: "Whether to wrap the icon with accessibility features",
-    },
-    height: {
-      control: { type: "range", min: 8, max: 96, step: 2 },
-      description: "Height of the icon in pixels",
-    },
-    stroke: {
-      control: "color",
-      description: "Stroke color of the icon lines",
-    },
-    strokeWidth: {
-      control: { type: "range", min: 1, max: 4, step: 0.5 },
-      description: "Stroke width of the icon",
-    },
-    strokeLinecap: {
-      control: "select",
-      options: ["butt", "round", "square"],
-      description: "Style of line endings",
-    },
-    className: {
-      control: "text",
-      description: "CSS classes for styling (use  for overrides)",
+      description: "Wrap with accessibility label",
     },
   },
 }
@@ -1002,255 +105,82 @@ function BranchButton() {
 export default meta
 type Story = StoryObj<typeof GitBranchIcon>
 
-// Story parameters for consistent dark theme
-const storyParameters = {
-  backgrounds: {
-    default: "dark",
-    values: [
-      { name: "dark", value: "var(--color-fm-surface-primary)" },
-      { name: "darker", value: "var(--color-fm-neutral-0)" },
-    ],
-  },
-}
-
 export const Default: Story = {
   args: {
-    width: 24,
-    height: 24,
-    className: "text-fm-icon-info ",
+    className: "h-6 w-6 text-fm-icon-active",
     withAccessibility: true,
   },
-  parameters: storyParameters,
   render: (args) => (
-    <div className="from-fm-surface-primary to-fm-surface-secondary flex h-32 min-h-dvh items-center justify-center rounded-lg bg-linear-to-br">
+    <IconDefaultCanvas>
       <GitBranchIcon {...args} />
-    </div>
+    </IconDefaultCanvas>
   ),
 }
 
 export const SizeVariations: Story = {
-  parameters: {
-    ...storyParameters,
-    docs: {
-      description: {
-        story:
-          "GitBranchIcon in different sizes, from small search inputs to large interface elements.",
-      },
-    },
-  },
-  render: () => (
-    <div className="from-fm-surface-primary to-fm-surface-secondary flex h-64 min-h-dvh items-center justify-center gap-8 rounded-lg bg-linear-to-br p-8">
-      <div className="text-center">
-        <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-3 w-3" />
-        <span className="text-fm-tertiary text-xs">12px</span>
-      </div>
-      <div className="text-center">
-        <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-4 w-4" />
-        <span className="text-fm-tertiary text-xs">16px</span>
-      </div>
-      <div className="text-center">
-        <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-5 w-5" />
-        <span className="text-fm-tertiary text-xs">20px</span>
-      </div>
-      <div className="text-center">
-        <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-6 w-6" />
-        <span className="text-fm-tertiary text-xs">24px</span>
-      </div>
-      <div className="text-center">
-        <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-8 w-8" />
-        <span className="text-fm-tertiary text-xs">32px</span>
-      </div>
-      <div className="text-center">
-        <GitBranchIcon className="text-fm-icon-info !mx-auto mb-2 h-12 w-12" />
-        <span className="text-fm-tertiary text-xs">48px</span>
-      </div>
-    </div>
-  ),
+  render: () => <IconSizeVariations icon={GitBranchIcon} />,
 }
 
 export const ColorVariations: Story = {
-  parameters: {
-    ...storyParameters,
-    docs: {
-      description: {
-        story:
-          "GitBranchIcon in different colors for various search states and contexts.",
-      },
-    },
-  },
-  render: () => (
-    <div className="from-fm-surface-primary to-fm-surface-secondary grid min-h-dvh grid-cols-2 items-center justify-center gap-6 rounded-lg bg-linear-to-br p-8 md:grid-cols-4">
-      <div className="text-center">
-        <div className="border-fm-icon-info/30 bg-fm-icon-info/20 !mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border">
-          <GitBranchIcon className="text-fm-icon-info h-8 w-8" />
-        </div>
-        <div className="text-fm-icon-active text-sm font-medium">Primary</div>
-        <div className="text-fm-icon-info text-xs">text-fm-icon-info</div>
-      </div>
-      <div className="text-center">
-        <div className="border-fm-icon-info/30 bg-fm-icon-info/20 !mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border">
-          <GitBranchIcon className="text-fm-icon-info h-8 w-8" />
-        </div>
-        <div className="text-fm-icon-active text-sm font-medium">Active</div>
-        <div className="text-fm-icon-info text-xs">text-fm-icon-info</div>
-      </div>
-      <div className="text-center">
-        <div className="border-fm-divider-primary bg-fm-surface-tertiary/20 !mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border">
-          <GitBranchIcon className="text-fm-placeholder h-8 w-8" />
-        </div>
-        <div className="text-fm-icon-active text-sm font-medium">Disabled</div>
-        <div className="text-fm-placeholder text-xs">text-fm-placeholder</div>
-      </div>
-      <div className="text-center">
-        <div className="border-fm-icon-info/30 bg-fm-icon-info/20 !mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border">
-          <GitBranchIcon className="text-fm-icon-info h-8 w-8" />
-        </div>
-        <div className="text-fm-icon-active text-sm font-medium">Info</div>
-        <div className="text-fm-icon-info text-xs">text-fm-icon-info</div>
-      </div>
-    </div>
-  ),
+  render: () => <IconColorVariations icon={GitBranchIcon} />,
 }
 
 export const UsageExamples: Story = {
-  parameters: {
-    ...storyParameters,
-    docs: {
-      description: {
-        story:
-          "Real-world usage examples showing GitBranchIcon used in version control interfaces, including actions like creating branches, checking out branches, managing recent branches, and performing branch management tasks such as renaming or deleting branches.",
-      },
-    },
-  },
   render: () => (
-    <div className="from-fm-surface-primary to-fm-surface-primary min-h-dvh space-y-8 rounded-lg bg-linear-to-br p-8">
-      {/* Toolbar */}
-      <div className="space-y-2">
-        <h3 className="text-fm-icon-active text-sm font-medium">
-          Branch Controls
-        </h3>
-        <div className="flex gap-4">
-          <button className="border-fm-icon-info/30 bg-fm-icon-info/15 text-fm-icon-info hover:bg-fm-icon-info/25 flex items-center gap-2 rounded-lg border px-4 py-2 transition hover:cursor-pointer">
-            <GitBranchIcon className="h-4 w-4" />
-            Create Branch
-          </button>
-          <button className="border-fm-icon-info/30 bg-fm-icon-info/15 text-fm-icon-info hover:bg-fm-icon-info/25 flex items-center gap-2 rounded-lg border px-4 py-2 transition hover:cursor-pointer">
-            <GitBranchIcon className="h-4 w-4" />
-            Checkout
-          </button>
+    <IconUsageCanvas>
+      <IconUsageSection title="Branch Label">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-1.5 rounded-xl border px-3 py-1.5">
+          <GitBranchIcon className="text-fm-icon-active h-3.5 w-3.5" />
+          <span className="text-fm-primary font-fm-text text-xs">main</span>
         </div>
-      </div>
+      </IconUsageSection>
 
-      {/* Recent Branches */}
-      <div className="space-y-2">
-        <h3 className="text-fm-icon-active text-sm font-medium">
-          Recent Branches
-        </h3>
-        <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-lg border p-4">
+      <IconUsageSection title="Pipeline Status">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full max-w-sm overflow-hidden rounded-xl border">
           {[
-            { name: "feature/auth-flow", updated: "Jun 25, 2025" },
-            { name: "fix/navbar-overlap", updated: "Jun 23, 2025" },
-            { name: "release/3.2.0", updated: "Jun 20, 2025" },
-          ].map((branch, index) => (
+            { branch: "main", status: "active" },
+            { branch: "feature/audio", status: "active" },
+            { branch: "fix/player", status: "inactive" },
+          ].map(({ branch, status }) => (
             <div
-              key={index}
-              className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-secondary flex items-center gap-3 rounded border p-3 transition"
+              key={branch}
+              className="border-fm-divider-secondary flex items-center gap-3 border-b px-4 py-3 last:border-b-0"
             >
-              <GitBranchIcon className="text-fm-icon-positive h-5 w-5" />
-              <div className="flex-1">
-                <div className="text-fm-icon-active text-sm font-medium">
-                  {branch.name}
-                </div>
-                <div className="text-fm-tertiary text-xs">
-                  Updated {branch.updated}
-                </div>
-              </div>
+              <GitBranchIcon
+                className={`h-4 w-4 ${status === "active" ? "text-fm-icon-positive" : "text-fm-icon-inactive"}`}
+              />
+              <span className="text-fm-primary font-fm-text text-sm">
+                {branch}
+              </span>
             </div>
           ))}
         </div>
-      </div>
-
-      {/* Management Actions */}
-      <div className="space-y-2">
-        <h3 className="text-fm-icon-active text-sm font-medium">
-          Manage Branches
-        </h3>
-        <div className="flex gap-4">
-          <button className="border-fm-icon-warning/30 bg-fm-icon-warning/15 text-fm-icon-warning hover:bg-fm-icon-warning/25 flex items-center gap-2 rounded-lg border px-4 py-2 transition hover:cursor-pointer">
-            <GitBranchIcon className="h-4 w-4" />
-            Rename
-          </button>
-          <button className="border-fm-icon-negative/30 bg-fm-icon-negative/15 text-fm-icon-negative hover:bg-fm-icon-negative/25 flex items-center gap-2 rounded-lg border px-4 py-2 transition hover:cursor-pointer">
-            <GitBranchIcon className="h-4 w-4" />
-            Delete
-          </button>
-        </div>
-      </div>
-    </div>
-  ),
-}
-
-export const InteractiveStates: Story = {
-  parameters: {
-    ...storyParameters,
-    docs: {
-      description: {
-        story:
-          "Interactive states showing hover effects, animations, and different search states.",
-      },
-    },
-  },
-  render: () => (
-    <div className="from-fm-surface-primary to-fm-surface-secondary min-h-dvh space-y-8 rounded-lg bg-linear-to-br p-8">
-      <div className="space-y-4">
-        <h3 className="text-fm-secondary text-sm font-medium">
-          Interactive States & Motion
-        </h3>
-        <div className="flex gap-8">
-          {/* Hover color transition */}
-          <div className="flex flex-col items-center gap-2">
-            <GitBranchIcon className="text-fm-tertiary hover:text-fm-icon-info h-8 w-8 transition-colors" />
-            <span className="text-fm-tertiary text-xs">Hover to Highlight</span>
-          </div>
-
-          {/* Hover scale up */}
-          <div className="flex flex-col items-center gap-2">
-            <GitBranchIcon className="text-fm-icon-active h-8 w-8 transition-transform duration-200 hover:scale-110" />
-            <span className="text-fm-tertiary text-xs">Scale on Hover</span>
-          </div>
+      </IconUsageSection>
 
-          {/* Pulse animation to show sync or branch update */}
-          <div className="flex flex-col items-center gap-2">
-            <GitBranchIcon className="text-fm-icon-positive h-8 w-8 animate-pulse" />
-            <span className="text-fm-tertiary text-xs">Sync Pulse</span>
-          </div>
+      <IconUsageSection title="Dev Tools Row">
+        <div className="flex gap-3">
+          {[GitBranchIcon, GitForkIcon, ImportFolderIcon].map((Icon, i) => (
+            <div
+              key={i}
+              className="border-fm-divider-secondary bg-fm-surface-secondary flex h-10 w-10 items-center justify-center rounded-xl border"
+            >
+              <Icon className="text-fm-icon-active h-5 w-5" />
+            </div>
+          ))}
         </div>
-      </div>
-    </div>
+      </IconUsageSection>
+    </IconUsageCanvas>
   ),
 }
 
 export const Playground: Story = {
-  parameters: {
-    ...storyParameters,
-    docs: {
-      description: {
-        story:
-          "Interactive playground to experiment with different GitBranchIcon configurations.",
-      },
-    },
-  },
   args: {
-    width: 32,
-    height: 32,
-    className: "text-fm-icon-info ",
-    strokeLinecap: "square",
+    className: "h-8 w-8 text-fm-icon-active",
+    withAccessibility: true,
   },
   render: (args) => (
-    <div className="from-fm-surface-primary to-fm-surface-secondary flex h-64 min-h-dvh items-center justify-center rounded-lg bg-linear-to-br">
-      <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
-        <GitBranchIcon {...args} />
-      </div>
-    </div>
+    <IconPlaygroundCanvas>
+      <GitBranchIcon {...args} />
+    </IconPlaygroundCanvas>
   ),
 }