sonance-brand-mcp 1.3.1 → 1.3.2

package/dist/assets/components/sidebar.stories.tsx

@@ -71,7 +71,7 @@ export const Default: Story = {
               <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground font-medium">
                 S
               </div>
-              <span className="font-medium text-foreground">Sonance</span>
+              <span id="default-span-sonance" className="font-medium text-foreground">Sonance</span>
             </div>
           </SidebarHeader>
           <SidebarContent>
@@ -82,9 +82,9 @@ export const Default: Story = {
                   {mainNavItems.map((item) => (
                     <SidebarMenuItem key={item.label}>
                       <SidebarMenuButton asChild>
-                        <a href={item.href}>
+                        <a id="default-a" href={item.href}>
                           <item.icon />
-                          <span>{item.label}</span>
+                          <span id="default-span-itemlabel">{item.label}</span>
                         </a>
                       </SidebarMenuButton>
                     </SidebarMenuItem>
@@ -107,8 +107,8 @@ export const Default: Story = {
                       {productItems.map((item) => (
                         <SidebarMenuItem key={item.label}>
                           <SidebarMenuButton asChild isActive={item.isActive}>
-                            <a href={item.href}>
-                              <span>{item.label}</span>
+                            <a id="default-a" href={item.href}>
+                              <span id="default-span-itemlabel">{item.label}</span>
                             </a>
                           </SidebarMenuButton>
                         </SidebarMenuItem>
@@ -124,7 +124,7 @@ export const Default: Story = {
               <SidebarMenuItem>
                 <SidebarMenuButton>
                   <Avatar fallback="John Doe" size="sm" />
-                  <span>John Doe</span>
+                  <span id="default-span-john-doe">John Doe</span>
                 </SidebarMenuButton>
               </SidebarMenuItem>
             </SidebarMenu>
@@ -134,10 +134,10 @@ export const Default: Story = {
         <SidebarInset>
           <header className="flex h-14 items-center gap-4 border-b border-border px-4">
             <SidebarTrigger />
-            <h1 className="text-lg font-medium">Dashboard</h1>
+            <h1 id="header-h1-dashboard" className="text-lg font-medium">Dashboard</h1>
           </header>
           <div className="flex-1 p-6">
-            <p className="text-foreground-secondary">
+            <p id="header-p-main-content-area-pr" className="text-foreground-secondary">
               Main content area. Press ⌘B to toggle the sidebar.
             </p>
           </div>
@@ -157,7 +157,7 @@ export const WithSearch: Story = {
               <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground font-medium">
                 S
               </div>
-              <span className="font-medium text-foreground">Sonance</span>
+              <span id="with-search-span-sonance" className="font-medium text-foreground">Sonance</span>
             </div>
             <div className="relative px-2">
               <Search className="absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground-muted" />
@@ -172,9 +172,9 @@ export const WithSearch: Story = {
                   {mainNavItems.map((item) => (
                     <SidebarMenuItem key={item.label}>
                       <SidebarMenuButton asChild tooltip={item.label}>
-                        <a href={item.href}>
+                        <a id="with-search-a" href={item.href}>
                           <item.icon />
-                          <span>{item.label}</span>
+                          <span id="with-search-span-itemlabel">{item.label}</span>
                         </a>
                       </SidebarMenuButton>
                     </SidebarMenuItem>
@@ -188,10 +188,10 @@ export const WithSearch: Story = {
         <SidebarInset>
           <header className="flex h-14 items-center gap-4 border-b border-border px-4">
             <SidebarTrigger />
-            <h1 className="text-lg font-medium">Search Example</h1>
+            <h1 id="header-h1-search-example" className="text-lg font-medium">Search Example</h1>
           </header>
           <div className="flex-1 p-6">
-            <p className="text-foreground-secondary">
+            <p id="header-p-this-sidebar-include" className="text-foreground-secondary">
               This sidebar includes a search input in the header.
             </p>
           </div>
@@ -211,7 +211,7 @@ export const WithSubMenu: Story = {
               <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground font-medium">
                 S
               </div>
-              <span className="font-medium text-foreground">Sonance</span>
+              <span id="with-sub-menu-span-sonance" className="font-medium text-foreground">Sonance</span>
             </div>
           </SidebarHeader>
           <SidebarContent>
@@ -222,9 +222,9 @@ export const WithSubMenu: Story = {
                   <Collapsible asChild defaultOpen>
                     <SidebarMenuItem>
                       <SidebarMenuButton asChild>
-                        <a href="#">
+                        <a id="with-sub-menu-a" href="#">
                           <Home />
-                          <span>Architectural</span>
+                          <span id="with-sub-menu-span-architectural">Architectural</span>
                         </a>
                       </SidebarMenuButton>
                       <CollapsibleTrigger asChild>
@@ -236,17 +236,17 @@ export const WithSubMenu: Story = {
                         <SidebarMenuSub>
                           <SidebarMenuSubItem>
                             <SidebarMenuSubButton asChild>
-                              <a href="#">In-Ceiling</a>
+                              <a id="with-sub-menu-a" href="#">In-Ceiling</a>
                             </SidebarMenuSubButton>
                           </SidebarMenuSubItem>
                           <SidebarMenuSubItem>
                             <SidebarMenuSubButton asChild isActive>
-                              <a href="#">In-Wall</a>
+                              <a id="with-sub-menu-a" href="#">In-Wall</a>
                             </SidebarMenuSubButton>
                           </SidebarMenuSubItem>
                           <SidebarMenuSubItem>
                             <SidebarMenuSubButton asChild>
-                              <a href="#">Invisible</a>
+                              <a id="with-sub-menu-a" href="#">Invisible</a>
                             </SidebarMenuSubButton>
                           </SidebarMenuSubItem>
                         </SidebarMenuSub>
@@ -255,9 +255,9 @@ export const WithSubMenu: Story = {
                   </Collapsible>
                   <SidebarMenuItem>
                     <SidebarMenuButton asChild>
-                      <a href="#">
+                      <a id="with-sub-menu-a" href="#">
                         <Users />
-                        <span>Outdoor</span>
+                        <span id="with-sub-menu-span-outdoor">Outdoor</span>
                       </a>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
@@ -270,13 +270,13 @@ export const WithSubMenu: Story = {
               <SidebarMenuItem>
                 <SidebarMenuButton>
                   <Plus />
-                  <span>Add Product</span>
+                  <span id="with-sub-menu-span-add-product">Add Product</span>
                 </SidebarMenuButton>
               </SidebarMenuItem>
               <SidebarMenuItem>
                 <SidebarMenuButton>
                   <LogOut />
-                  <span>Logout</span>
+                  <span id="with-sub-menu-span-logout">Logout</span>
                 </SidebarMenuButton>
               </SidebarMenuItem>
             </SidebarMenu>
@@ -286,10 +286,10 @@ export const WithSubMenu: Story = {
         <SidebarInset>
           <header className="flex h-14 items-center gap-4 border-b border-border px-4">
             <SidebarTrigger />
-            <h1 className="text-lg font-medium">With Sub Menu</h1>
+            <h1 id="header-h1-with-sub-menu" className="text-lg font-medium">With Sub Menu</h1>
           </header>
           <div className="flex-1 p-6">
-            <p className="text-foreground-secondary">
+            <p id="header-p-this-sidebar-include" className="text-foreground-secondary">
               This sidebar includes expandable sub-menus.
             </p>
           </div>
@@ -309,7 +309,7 @@ export const Floating: Story = {
               <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-primary-foreground font-medium">
                 S
               </div>
-              <span className="font-medium text-foreground">Sonance</span>
+              <span id="floating-span-sonance" className="font-medium text-foreground">Sonance</span>
             </div>
           </SidebarHeader>
           <SidebarContent>
@@ -320,9 +320,9 @@ export const Floating: Story = {
                   {mainNavItems.map((item) => (
                     <SidebarMenuItem key={item.label}>
                       <SidebarMenuButton asChild>
-                        <a href={item.href}>
+                        <a id="floating-a" href={item.href}>
                           <item.icon />
-                          <span>{item.label}</span>
+                          <span id="floating-span-itemlabel">{item.label}</span>
                         </a>
                       </SidebarMenuButton>
                     </SidebarMenuItem>
@@ -336,10 +336,10 @@ export const Floating: Story = {
         <SidebarInset>
           <header className="flex h-14 items-center gap-4 border-b border-border px-4">
             <SidebarTrigger />
-            <h1 className="text-lg font-medium">Floating Variant</h1>
+            <h1 id="header-h1-floating-variant" className="text-lg font-medium">Floating Variant</h1>
           </header>
           <div className="flex-1 p-6">
-            <p className="text-foreground-secondary">
+            <p id="header-p-the-floating-variant" className="text-foreground-secondary">
               The floating variant adds rounded corners and a shadow to the sidebar.
             </p>
           </div>

package/dist/assets/components/sidebar.tsx

@@ -141,7 +141,7 @@ const SidebarProvider = React.forwardRef<
               "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar-background",
               className
             )}
-            ref={ref}
+            ref={ref} data-sonance-name="sidebar"
             {...props}
           >
             {children}
@@ -176,12 +176,7 @@ const Sidebar = React.forwardRef<
 
     if (collapsible === "none") {
       return (
-        <div
-          className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground",
-            className
-          )}
-          ref={ref}
+        <div data-sonance-name="sidebar"
           {...props}
         >
           {children}
@@ -191,7 +186,7 @@ const Sidebar = React.forwardRef<
 
     if (isMobile) {
       return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} data-sonance-name="sidebar" {...props}>
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
@@ -210,7 +205,7 @@ const Sidebar = React.forwardRef<
     }
 
     return (
-      <div
+      <div data-sonance-name="sidebar"
         ref={ref}
         className="group peer hidden md:block text-sidebar-foreground"
         data-state={state}
@@ -240,7 +235,7 @@ const Sidebar = React.forwardRef<
               ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
               : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l bg-sidebar-background",
             className
-          )}
+          )} data-sonance-name="sidebar"
           {...props}
         >
           <div
@@ -264,6 +259,7 @@ const SidebarTrigger = React.forwardRef<
 
   return (
     <Button
+      id="sidebar-trigger-button-ghost"
       ref={ref}
       data-sidebar="trigger"
       variant="ghost"
@@ -276,7 +272,7 @@ const SidebarTrigger = React.forwardRef<
       {...props}
     >
       <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
+      <span id="sidebar-trigger-span-toggle-sidebar" className="sr-only">Toggle Sidebar</span>
     </Button>
   )
 })
@@ -304,7 +300,7 @@ const SidebarRail = React.forwardRef<
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
-      )}
+      )} data-sonance-name="sidebar"
       {...props}
     />
   )
@@ -322,7 +318,7 @@ const SidebarInset = React.forwardRef<
         "relative flex min-h-svh flex-1 flex-col bg-background",
         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className
-      )}
+      )} data-sonance-name="sidebar"
       {...props}
     />
   )
@@ -335,12 +331,13 @@ const SidebarInput = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <Input
+      id="sidebar-input-input-sidebar"
       ref={ref}
       data-sidebar="input"
       className={cn(
         "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
         className
-      )}
+      )} data-sonance-name="sidebar"
       {...props}
     />
   )
@@ -355,7 +352,7 @@ const SidebarHeader = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
+      className={cn("flex flex-col gap-2 p-2", className)} data-sonance-name="sidebar"
       {...props}
     />
   )
@@ -370,7 +367,7 @@ const SidebarFooter = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
+      className={cn("flex flex-col gap-2 p-2", className)} data-sonance-name="sidebar"
       {...props}
     />
   )
@@ -385,7 +382,7 @@ const SidebarSeparator = React.forwardRef<
     <Separator
       ref={ref}
       data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      className={cn("mx-2 w-auto bg-sidebar-border", className)} data-sonance-name="sidebar"
       {...props}
     />
   )
@@ -403,7 +400,7 @@ const SidebarContent = React.forwardRef<
       className={cn(
         "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon]:gap-0",
         className
-      )}
+      )} data-sonance-name="sidebar"
       {...props}
     />
   )
@@ -418,7 +415,7 @@ const SidebarGroup = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:py-0", className)}
+      className={cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:py-0", className)} data-sonance-name="sidebar"
       {...props}
     />
   )
@@ -476,7 +473,7 @@ const SidebarGroupContent = React.forwardRef<
   <div
     ref={ref}
     data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
+    className={cn("w-full text-sm", className)} data-sonance-name="sidebar"
     {...props}
   />
 ))
@@ -489,7 +486,7 @@ const SidebarMenu = React.forwardRef<
   <ul
     ref={ref}
     data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)} data-sonance-name="sidebar"
     {...props}
   />
 ))
@@ -502,7 +499,7 @@ const SidebarMenuItem = React.forwardRef<
   <li
     ref={ref}
     data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
+    className={cn("group/menu-item relative", className)} data-sonance-name="sidebar"
     {...props}
   />
 ))
@@ -559,7 +556,7 @@ const SidebarMenuButton = React.forwardRef<
         data-sidebar="menu-button"
         data-size={size}
         data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)} data-sonance-name="sidebar"
         {...props}
       />
     )
@@ -635,7 +632,7 @@ const SidebarMenuBadge = React.forwardRef<
       "peer-data-[size=lg]/menu-button:top-2.5",
       "group-data-[collapsible=icon]:hidden",
       className
-    )}
+    )} data-sonance-name="sidebar"
     {...props}
   />
 ))
@@ -656,7 +653,7 @@ const SidebarMenuSkeleton = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="menu-skeleton"
-      className={cn("rounded-sm h-8 flex gap-2 px-2 items-center", className)}
+      className={cn("rounded-sm h-8 flex gap-2 px-2 items-center", className)} data-sonance-name="sidebar"
       {...props}
     >
       {showIcon && (
@@ -690,7 +687,7 @@ const SidebarMenuSub = React.forwardRef<
       "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
       "group-data-[collapsible=icon]:hidden",
       className
-    )}
+    )} data-sonance-name="sidebar"
     {...props}
   />
 ))
@@ -699,7 +696,7 @@ SidebarMenuSub.displayName = "SidebarMenuSub"
 const SidebarMenuSubItem = React.forwardRef<
   HTMLLIElement,
   React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />)
+>(({ ...props }, ref) => <li ref={ref} data-sonance-name="sidebar" {...props} />)
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
 
 const SidebarMenuSubButton = React.forwardRef<

package/dist/assets/components/skeleton.stories.tsx

@@ -132,7 +132,7 @@ export const ResponsiveMatrix: Story = {
     <div className="space-y-8">
       {/* Mobile */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <h4 id="responsive-matrix-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
         <div className="w-[375px] border border-dashed border-border p-4 space-y-4">
           <div className="flex items-center gap-4">
             <SkeletonAvatar size="md" />
@@ -146,7 +146,7 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
         <div className="w-[768px] border border-dashed border-border p-4">
           <div className="grid grid-cols-2 gap-4">
             <SkeletonCard />
@@ -156,7 +156,7 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="responsive-matrix-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border p-4">
           <SkeletonTable rows={4} columns={5} />
         </div>

package/dist/assets/components/skeleton.tsx

@@ -22,6 +22,7 @@ export function Skeleton({
 
   return (
     <div
+      data-sonance-name="skeleton"
       className={cn(
         "animate-pulse bg-background-secondary",
         variantClasses[variant],
@@ -40,7 +41,7 @@ export function Skeleton({
 // Preset skeleton components
 export function SkeletonText({ lines = 3, className }: { lines?: number; className?: string }) {
   return (
-    <div className={cn("space-y-2", className)}>
+    <div data-sonance-name="skeleton" className={cn("space-y-2", className)}>
       {Array.from({ length: lines }).map((_, i) => (
         <Skeleton
           key={i}
@@ -111,4 +112,3 @@ export function SkeletonTable({
     </div>
   );
 }
-

package/dist/assets/components/slider.stories.tsx

@@ -91,12 +91,12 @@ export const StateMatrix: Story = {
   render: () => {
     const states: SliderState[] = ['default', 'hover', 'focus', 'active', 'disabled'];
     return (
-      <div className="space-y-6 w-80">
-        <h3 className="text-sm font-medium text-foreground-muted">Slider States</h3>
+      <div data-sonance-name="slider.stories" className="space-y-6 w-80">
+        <h3 id="state-matrix-h3-slider-states" className="text-sm font-medium text-foreground-muted">Slider States</h3>
         <div className="space-y-6">
           {states.map((state) => (
             <div key={state} className="flex items-center gap-4">
-              <span className="text-xs font-medium text-foreground-muted uppercase w-20">{state}</span>
+              <span id="state-matrix-span-state" className="text-xs font-medium text-foreground-muted uppercase w-20">{state}</span>
               <Slider state={state} defaultValue={50} label={state} />
             </div>
           ))}
@@ -112,7 +112,7 @@ export const ResponsiveMatrix: Story = {
     <div className="space-y-8">
       {/* Mobile */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <h4 id="responsive-matrix-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
         <div className="w-[375px] border border-dashed border-border p-4 space-y-6">
           <Slider label="Volume" showValue defaultValue={75} />
           <Slider label="Brightness" showValue defaultValue={50} />
@@ -120,7 +120,7 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
         <div className="w-[768px] border border-dashed border-border p-4">
           <div className="grid grid-cols-2 gap-8">
             <Slider label="Bass" showValue defaultValue={60} />
@@ -130,7 +130,7 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="responsive-matrix-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border p-4">
           <div className="grid grid-cols-4 gap-8">
             <Slider label="Volume" showValue defaultValue={80} />

package/dist/assets/components/slider.tsx

@@ -134,7 +134,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
     };
 
     return (
-      <div ref={ref} className={cn("w-full", className)}>
+      <div data-sonance-name="slider" ref={ref} className={cn("w-full", className)}>
         {(label || showValue) && (
           <div className="mb-3 flex items-center justify-between">
             {label && (
@@ -143,7 +143,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
               </label>
             )}
             {showValue && (
-              <span className="text-sm font-medium text-foreground">{value}</span>
+              <span id="span-value" className="text-sm font-medium text-foreground">{value}</span>
             )}
           </div>
         )}
@@ -170,7 +170,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
             style={{ width: `${percentage}%` }}
           />
           {/* Thumb */}
-          <div
+          <div data-sonance-name="slider"
             className={cn(
               "absolute top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full",
               "border-2 border-primary bg-background shadow-sm transition-all",

package/dist/assets/components/spacer.stories.tsx

@@ -66,7 +66,7 @@ export const PresetSizes: Story = {
 export const FlexSpacerExample: Story = {
   render: () => (
     <div className="flex items-center border border-border p-4 w-96">
-      <span className="text-foreground font-medium">Logo</span>
+      <span id="flex-spacer-example-span-logo" className="text-foreground font-medium">Logo</span>
       <FlexSpacer />
       <button className="px-3 py-1 text-sm text-foreground-muted hover:text-foreground">About</button>
       <Spacer x={2} />
@@ -80,11 +80,11 @@ export const FlexSpacerExample: Story = {
 export const CardLayout: Story = {
   render: () => (
     <div className="border border-border p-6 w-80">
-      <h3 className="text-lg font-medium text-foreground">Card Title</h3>
+      <h3 id="card-layout-h3-card-title" className="text-lg font-medium text-foreground">Card Title</h3>
       <SpacerXS />
-      <p className="text-sm text-foreground-muted">A subtitle or meta information</p>
+      <p id="card-layout-p-a-subtitle-or-meta-i" className="text-sm text-foreground-muted">A subtitle or meta information</p>
       <SpacerMD />
-      <p className="text-foreground-secondary">
+      <p id="card-layout-p-this-is-the-main-con" className="text-foreground-secondary">
         This is the main content of the card. Notice how spacers provide consistent rhythm between elements.
       </p>
       <SpacerLG />
@@ -100,7 +100,7 @@ export const CardLayout: Story = {
 export const ResponsiveSpacing: Story = {
   render: () => (
     <div className="space-y-4">
-      <p className="text-xs text-foreground-muted">
+      <p id="responsive-spacing-p-spacer-uses-a-4px-ba" className="text-xs text-foreground-muted">
         Spacer uses a 4px base unit. y=1 is 4px, y=4 is 16px, etc.
       </p>
       <div className="border border-dashed border-border p-4 w-64">
@@ -121,7 +121,7 @@ export const ResponsiveSpacing: Story = {
 export const FormLayout: Story = {
   render: () => (
     <form className="w-80 border border-border p-6">
-      <h2 className="text-lg font-medium text-foreground">Contact Form</h2>
+      <h2 id="form-layout-h2-contact-form" className="text-lg font-medium text-foreground">Contact Form</h2>
       <SpacerMD />
 
       <label className="block text-sm font-medium text-foreground">Name</label>
@@ -170,7 +170,7 @@ export const ResponsiveMatrix: Story = {
     <div className="space-y-8">
       {/* Mobile */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <h4 id="responsive-matrix-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
         <div className="w-[375px] border border-dashed border-border p-4">
           <div className="p-2 bg-primary text-primary-foreground text-center text-sm">Header</div>
           <SpacerMD />
@@ -181,10 +181,10 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
         <div className="w-[768px] border border-dashed border-border p-4">
           <div className="flex items-center">
-            <span className="text-foreground font-medium">Logo</span>
+            <span id="responsive-matrix-span-logo" className="text-foreground font-medium">Logo</span>
             <FlexSpacer />
             <button className="px-3 py-1 text-sm text-foreground-muted">About</button>
             <Spacer x={2} />
@@ -196,10 +196,10 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="responsive-matrix-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border p-4">
           <div className="flex items-center">
-            <span className="text-foreground font-medium">Sonance</span>
+            <span id="responsive-matrix-span-sonance" className="text-foreground font-medium">Sonance</span>
             <Spacer x={8} />
             <button className="px-3 py-1 text-sm text-foreground-muted">Products</button>
             <Spacer x={4} />

package/dist/assets/components/spacer.tsx

@@ -36,7 +36,7 @@ export function Spacer({ x, y, className }: SpacerProps) {
   }
 
   return (
-    <div
+    <div data-sonance-name="spacer"
       className={cn("shrink-0", className)}
       style={style}
       aria-hidden="true"
@@ -46,7 +46,7 @@ export function Spacer({ x, y, className }: SpacerProps) {
 
 // Common preset spacers
 export function SpacerXS() {
-  return <Spacer y={2} />;
+  return <Spacer data-sonance-name="spacer" y={2} />;
 }
 
 export function SpacerSM() {