ui: full-bleed separator (breaks out of Container's space=medium padding)

src/ui.tsx

@@ -4,7 +4,6 @@ import {
   Text,
   Muted,
   VerticalSpace,
-  Divider,
   Stack,
   Modal,
   IconButton,
@@ -27,6 +26,24 @@ const MIN_WINDOW_SIZE = { width: 320, height: 200 }
 // Full plugin version shown in the footer status bar. Keep in sync with package.json "version".
 const PLUGIN_VERSION = '0.1.0'
 
+// Full-bleed separator: breaks out of the Container's horizontal `space="medium"` padding
+// (which is `0 var(--space-medium)`) so the line spans the whole window edge-to-edge.
+function Separator () {
+  return (
+    <hr
+      style={{
+        border: 'none',
+        height: '1px',
+        backgroundColor: 'var(--figma-color-border)',
+        marginTop: 0,
+        marginBottom: 0,
+        marginLeft: 'calc(-1 * var(--space-medium))',
+        marginRight: 'calc(-1 * var(--space-medium))'
+      }}
+    />
+  )
+}
+
 function Plugin () {
   const [currentWindowSize, setCurrentWindowSize] = useState(MIN_WINDOW_SIZE)
   const resizeRef = useRef({ active: false, dir: '', startX: 0, startY: 0, startW: 0, startH: 0, fixedAxis: 'none' as 'none' | 'x' | 'y' })
@@ -342,13 +359,13 @@ function Plugin () {
             </IconButton>
           </nav>
         </header>
-        <Divider />
+        <Separator />
         {/* Body — semantic <main>, stretches via flex child of the column */}
         <main style={{ flex: '1 1 auto', overflow: 'auto' }}>
           {/* empty placeholder for now */}
         </main>
         {/* Footer — status bar */}
-        <Divider />
+        <Separator />
         <footer style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto', padding: 'var(--space-4)' }}>
           <Muted style={{ fontSize: '11px' }}>Version {PLUGIN_VERSION}</Muted>
         </footer>