chore(site): update eject code generator

site/src/content/docs/concepts/ui-components.mdx

@@ -43,8 +43,8 @@ Each primitive represents at most **one HTML element**, without internal element
 Complex components are broken into smaller, composable pieces. This pattern is used for:
 
 - **Sliders** - Root, Track, Thumb, Progress, Pointer
-- **Tooltips** - Root, Trigger, Positioner, Popup, Arrow, Portal
-- **Popovers** - Root, Trigger, Positioner, Popup, Portal
+- **Tooltips** - Root, Trigger, Positioner, Popup
+- **Popovers** - Root, Trigger, Positioner, Popup
 
 Each piece handles one concern, but they work together seamlessly.
 
@@ -98,4 +98,4 @@ Multi-element components for complex interactions:
 - <DocsLink slug="reference/time-slider">**TimeSlider**</DocsLink> - Seekable timeline with progress
 - <DocsLink slug="reference/volume-slider">**VolumeSlider**</DocsLink> - Volume control slider
 - **Tooltip** - Hover tooltips with positioning
-- **Popover** - Click/hover popovers with collision detection
+- **Popover** - Click/hover popovers with collision detection

site/src/utils/ejectCodeGenerator.ts

@@ -46,14 +46,12 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
               <PauseIcon className="icon pause-icon" />
             </PlayButton>
           </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
-              <Tooltip.Popup className="tooltip-popup surface popup-animation">
-                <span className="tooltip play-tooltip">Play</span>
-                <span className="tooltip pause-tooltip">Pause</span>
-              </Tooltip.Popup>
-            </Tooltip.Positioner>
-          </Tooltip.Portal>
+          <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
+            <Tooltip.Popup className="tooltip-popup surface popup-animation">
+              <span className="tooltip play-tooltip">Play</span>
+              <span className="tooltip pause-tooltip">Pause</span>
+            </Tooltip.Popup>
+          </Tooltip.Positioner>
         </Tooltip.Root>
 
         <div className="time-controls">
@@ -73,13 +71,11 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
                 <TimeSlider.Thumb className="slider-thumb" />
               </TimeSlider.Root>
             </Tooltip.Trigger>
-            <Tooltip.Portal>
-              <Tooltip.Positioner side="top" sideOffset={18} collisionPadding={12}>
-                <Tooltip.Popup className="surface popup-animation tooltip-popup">
-                  <PreviewTimeDisplay className="time-display media-preview-time-display" />
-                </Tooltip.Popup>
-              </Tooltip.Positioner>
-            </Tooltip.Portal>
+            <Tooltip.Positioner side="top" sideOffset={18} collisionPadding={12}>
+              <Tooltip.Popup className="surface popup-animation tooltip-popup">
+                <PreviewTimeDisplay className="time-display media-preview-time-display" />
+              </Tooltip.Popup>
+            </Tooltip.Positioner>
           </Tooltip.Root>
 
           <DurationDisplay className="time-display" />
@@ -93,18 +89,16 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
               <VolumeOffIcon className="icon volume-off-icon" />
             </MuteButton>
           </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Positioner side="top" sideOffset={12}>
-              <Popover.Popup className="surface popup-animation popover-popup">
-                <VolumeSlider.Root className="slider" orientation="vertical">
-                  <VolumeSlider.Track className="slider-track">
-                    <VolumeSlider.Progress className="slider-progress" />
-                  </VolumeSlider.Track>
-                  <VolumeSlider.Thumb className="slider-thumb" />
-                </VolumeSlider.Root>
-              </Popover.Popup>
-            </Popover.Positioner>
-          </Popover.Portal>
+          <Popover.Positioner side="top" sideOffset={12}>
+            <Popover.Popup className="surface popup-animation popover-popup">
+              <VolumeSlider.Root className="slider" orientation="vertical">
+                <VolumeSlider.Track className="slider-track">
+                  <VolumeSlider.Progress className="slider-progress" />
+                </VolumeSlider.Track>
+                <VolumeSlider.Thumb className="slider-thumb" />
+              </VolumeSlider.Root>
+            </Popover.Popup>
+          </Popover.Positioner>
         </Popover.Root>
 
         <Tooltip.Root delay={500}>
@@ -114,14 +108,12 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
               <FullscreenExitIcon className="icon fullscreen-exit-icon" />
             </FullscreenButton>
           </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
-              <Tooltip.Popup className="surface popup-animation tooltip-popup">
-                <span className="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
-                <span className="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
-              </Tooltip.Popup>
-            </Tooltip.Positioner>
-          </Tooltip.Portal>
+          <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
+            <Tooltip.Popup className="surface popup-animation tooltip-popup">
+              <span className="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
+              <span className="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
+            </Tooltip.Popup>
+          </Tooltip.Positioner>
         </Tooltip.Root>
       </div>
     </MediaContainer>
@@ -163,14 +155,12 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS
               <PauseIcon className="icon pause-icon" />
             </PlayButton>
           </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Positioner side="top-start" sideOffset={6} collisionPadding={12}>
-              <Tooltip.Popup className="popup-animation tooltip-popup">
-                <span className="tooltip play-tooltip">Play</span>
-                <span className="tooltip pause-tooltip">Pause</span>
-              </Tooltip.Popup>
-            </Tooltip.Positioner>
-          </Tooltip.Portal>
+          <Tooltip.Positioner side="top-start" sideOffset={6} collisionPadding={12}>
+            <Tooltip.Popup className="popup-animation tooltip-popup">
+              <span className="tooltip play-tooltip">Play</span>
+              <span className="tooltip pause-tooltip">Pause</span>
+            </Tooltip.Popup>
+          </Tooltip.Positioner>
         </Tooltip.Root>
 
         <div className="time-display-group">
@@ -196,13 +186,11 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS
               <TimeSlider.Thumb className="slider-thumb" />
             </TimeSlider.Root>
           </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
-              <Tooltip.Popup className="popup-animation tooltip-popup">
-                <PreviewTimeDisplay className="time-display media-preview-time-display" />
-              </Tooltip.Popup>
-            </Tooltip.Positioner>
-          </Tooltip.Portal>
+          <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
+            <Tooltip.Popup className="popup-animation tooltip-popup">
+              <PreviewTimeDisplay className="time-display media-preview-time-display" />
+            </Tooltip.Popup>
+          </Tooltip.Positioner>
         </Tooltip.Root>
 
         <div className="button-group">
@@ -214,18 +202,16 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS
                 <VolumeOffIcon className="icon volume-off-icon" />
               </MuteButton>
             </Popover.Trigger>
-            <Popover.Portal>
-              <Popover.Positioner side="top" sideOffset={2}>
-                <Popover.Popup className="popup-animation popover-popup">
-                  <VolumeSlider.Root className="slider" orientation="vertical">
-                    <VolumeSlider.Track className="slider-track">
-                      <VolumeSlider.Progress className="slider-progress" />
-                    </VolumeSlider.Track>
-                    <VolumeSlider.Thumb className="slider-thumb" />
-                  </VolumeSlider.Root>
-                </Popover.Popup>
-              </Popover.Positioner>
-            </Popover.Portal>
+            <Popover.Positioner side="top" sideOffset={2}>
+              <Popover.Popup className="popup-animation popover-popup">
+                <VolumeSlider.Root className="slider" orientation="vertical">
+                  <VolumeSlider.Track className="slider-track">
+                    <VolumeSlider.Progress className="slider-progress" />
+                  </VolumeSlider.Track>
+                  <VolumeSlider.Thumb className="slider-thumb" />
+                </VolumeSlider.Root>
+              </Popover.Popup>
+            </Popover.Positioner>
           </Popover.Root>
 
           <Tooltip.Root delay={500} closeDelay={0}>
@@ -235,14 +221,12 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS
                 <FullscreenExitAltIcon className="icon fullscreen-exit-icon" />
               </FullscreenButton>
             </Tooltip.Trigger>
-            <Tooltip.Portal>
-              <Tooltip.Positioner side="top-end" sideOffset={6} collisionPadding={12}>
-                <Tooltip.Popup className="popup-animation tooltip-popup">
-                  <span className="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
-                  <span className="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
-                </Tooltip.Popup>
-              </Tooltip.Positioner>
-            </Tooltip.Portal>
+            <Tooltip.Positioner side="top-end" sideOffset={6} collisionPadding={12}>
+              <Tooltip.Popup className="popup-animation tooltip-popup">
+                <span className="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
+                <span className="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
+              </Tooltip.Popup>
+            </Tooltip.Positioner>
           </Tooltip.Root>
         </div>
       </div>